Position div to vertically align with header

[ocon]

I am having trouble aligning my floating content.

<h2>Title</h2>
<div>picture and caption</div>
<p>lots of text</p>

If css is disabled or if the page is narrow I want my title to come first, followed by the div, and lastly my text, therefore I have arranged my HTML in that order. However, if the page is wide enough (detected with @media) I would like the div to float right with the text wrapping around it and no weird gaps of where the content would have been displayed.

My problem is I would like to have the div moved up so it starts at the same height of the title.

h2{margin-right:12em}
div{float:right;width:11em;margin-bottom:-2em;position:relative;top:-2em}

This seems hacky but it works for the most part. The biggest problem I have is when the title is so long that it wraps onto more than one line, then the div aligns vertically with only the last line of the title.

[lucy24]

I would like the div to float right

Floats don't work that way. It's always relative to what comes after it in the HTML. Here it doesn't seem as if a float is what you really need or want anyway. How about using {display: inline-block;} on both elements (h2 and div) with a min- and max-width in ems? If there's room, the elements display side by side; if not, they're inline.

Careful, though. If you really need them to be side by side you'll need to look closely at each element's top margin and/or padding. That's at least three elements: the h2, the div ... and then whatever the first element inside the div is.