CODEWITHSUNDEEP
htmlcssfloating
lama
lama

Reputation: 21

How to make text wrapable around following, floated element?

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:

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)

Upvotes: 2

Views: 93

Answers (2)

lama
lama

Reputation: 21

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

Upvotes: 0

David Millar
David Millar

Reputation: 1878

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.

Upvotes: 2

Related Questions