2

HTML:

<div class="heading">
  <h2 class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h2>
  <a class="action" href="#">Print</a>
</div>

Desired default look:

| Lorem ipsum dolor sit      [Print] |
| amet, consectetur adipiscing elit. |

Desired look on small screen (using media-queries):

| Lorem ipsum dolor sit |
| amet, consectetur     |
| adipiscing elit.      |
| [Print]               |

Not desired:

|                            [Print] |
| Lorem ipsum dolor sit amet,        |
| consectetur adipiscing elit.       |

Not desired:

| Lorem ipsum dolor sit      [Print] |
| amet, consectetur                  |
| adipiscing elit.                   |

Remarks:

  • Text may be any long.
  • Action element is constant height and variable width.

I see no way to do this using only CSS.

Right now I use JS (Harvey lib) to put floated DOM element before text on bigger screen.

Any ideas?

/// EDIT - moved to answer (sorry for mess)

lama
  • 21
  • 4
  • Sorry for wrong tags order. I can't change it now. – lama Sep 04 '13 at 15:04
  • Wrong tags order? HTML tags or stack overflow tags? – Steven V Sep 04 '13 at 15:04
  • 3
    The floated element either needs to be first in the markup or within the h2. http://cssdeck.com/labs/mxwjhbbs – cimmanon Sep 04 '13 at 15:08
  • The problem here is that to achieve the first desired effect the anchor tag must be **before** the headline. And to achieve the second desired effect the anchor must be **after** the headline. – OdraEncoded Sep 04 '13 at 15:24
  • possible duplicate of [What is the best way to move an element that's on the top to the bottom in Responsive design](http://stackoverflow.com/questions/17115995/what-is-the-best-way-to-move-an-element-thats-on-the-top-to-the-bottom-in-respo) – cimmanon Sep 04 '13 at 17:06
  • @StevenV, stack overflow tags. It's CSS problem and I didn't know that first will be used in question title. – lama Sep 04 '13 at 20:17
  • @lama Tags are displayed with the most popular first. You can't set the order they are displayed, even if you add them to the question in another order. – Steven V Sep 04 '13 at 20:19
  • @cimmanon, the question that you mention is similar but definitely not the same and may have different solution. Especially Felxbox don't go with text wrapping. And of course I know that floated needs to be before h2, but then semantics fail. Or maybe it's not so important? – lama Sep 04 '13 at 20:29
  • You must decide which is more important: semantics or desired appearance. The effect you're looking for with dynamically sized elements is impossible with pure CSS while retaining pure/semantic markup. Your 2nd "not desired" example is the best compromise between looks/purity. This is what a Flexbox solution would look like, btw: http://cssdeck.com/labs/9bntxaro – cimmanon Sep 04 '13 at 20:35
  • @cimmanon, thanks for your suggestion about deciding. I sometimes suffer for being too semantic-puristic, which makes me blind about some solutions. I will make an edit in the moment. – lama Sep 04 '13 at 20:52
  • It's preferred that you submit an answer, rather than modifying the question to contain your solution. – cimmanon Sep 04 '13 at 21:06

2 Answers2

2

There's no easy way to achieve both results using only CSS without modifying your markup. There are a few tricks you can use to try to emulate the behavior you want, though.

Trick 1: Use Absolute Positioning

Set the link to position:absolute;top:0;right:0; (and the container to position:relative; if needed). Then, use .text::before{display":block;content' ';float:right;} to place a gap where the print link will appear.

Trick 2: Double Links

You could place a link before/in the <h2> to float right for large displays, then hide it and show a (formerly-hidden) second link as a block element below the text on small displays.

David Millar
  • 1,858
  • 1
  • 14
  • 23
  • Double links are the best no javascript solution I can think of for this. – OdraEncoded Sep 04 '13 at 15:26
  • @David, trick 1 would require to know the size of floated element, to size the pseudo-element gap. And trick 2 become problematic when the floating element is something more than single link. I am expected to put there inline forms etc. – lama Sep 04 '13 at 20:34
  • Then it sounds like you'll probably end up needing a JS-based solution. – David Millar Sep 04 '13 at 20:48
0

Thanks to suggestions above, I finally decided to break pure semantics structure and put .action element before .text, so it floats easily with proper text wrapping. Adding the behavior desired for smaller screen was quite easy with the constrains about .action element size:

cssdeck.com/labs/epcoxk7o

HTML:

<div class="heading">
  <a class="action" href="#">Print</a>
  <h2 class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h2>
</div>

CSS:

.action {
  float: right;
  line-height: 20px;
  padding: 5px 70px;
  background: #eee;
}
.text {
  line-height: 30px;
}

@media (max-width: 30em) {
  .heading {
    position: relative;
    padding-bottom: 20px;
  }
  .action {
    position: absolute;
    bottom: 0;
    left: 0;
  }
}

Other solution would be what @cimmanon suggested: cssdeck.com/labs/9bntxaro

lama
  • 21
  • 4