Right align content keeping left content first in code - html

Question

See the following code: http://jsfiddle.net/chricholson/tyLbE/1/
HTML
<section>
<div>Secondary content</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum nunc at nibh elementum vestibulum. Curabitur nisi tortor, porttitor sed facilisis vel, volutpat in quam.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum nunc at nibh elementum vestibulum. Curabitur nisi tortor, porttitor sed facilisis vel, volutpat in quam.</p>
</section>
CSS
section { border: 1px solid red; overflow: hidden; }
div { float: right; width: 48%; height: 200px; background: #eee; }
p { width: 48%; }
I have a div (BoxA) floated to the right, which allows me to keep my paragraph tags outside of any separate container. I use the overflow hack to ensure that the outer container grows to the height of either a) the paragraphs or b) BoxA.
What I'd like, is to re-order the HTML to
Paragraphs
BoxA
The obvious solution to me is CSS positioning the secondary content but this of course prevents any growth of the outer container should BoxA box be longer than the paragraph list. I'd like to avoid any kind of Javascript here to set a height, it's not THAT important just desirable from an SEO point of view.
The other solution I can think of is to wrap the paragraphs in their own container, but this feels like unnecessary markup which shouldn't really be there (it's a visual thing which should really be handled by CSS).

Answer 1

I'm not sure if I've got you right but it seems that, in the markup, you want to move <p>s before <div> but you want the display to be same as your fiddle, i.e., gray area on right. check this fiddle to see if it solves your problem.
update
css
section{ border: 1px solid red; overflow: hidden; }
div{
background: none repeat scroll 0 0 #EEEEEE;
border: 1px solid #000000;
display: table-cell;
height: 246px;
width: 1%;
}
p{
clear: left;
float: left;
width: 48%;
}
and the markup (unchanged)
<section>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum nunc at nibh elementum vestibulum. Curabitur nisi tortor, porttitor sed facilisis vel, volutpat in quam.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum nunc at nibh elementum vestibulum. Curabitur nisi tortor, porttitor sed facilisis vel, volutpat in quam.</p>
<div>
Secondary content
</div>
</section>

Answer 2

I would suggest you to use a html wrapper like in this example:
http://jsfiddle.net/tyLbE/4/
<section>
<div class="left">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum nunc at nibh elementum vestibulum. Curabitur nisi tortor, porttitor sed facilisis vel, volutpat in quam.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum nunc at nibh elementum vestibulum. Curabitur nisi tortor, porttitor sed facilisis vel, volutpat in quam.</p>
</div>
<div class="right">
Secondary content
</div>
<div class="clear"></div>
</section>
and the css:
section { border: 1px solid red; overflow: hidden; }
div.left { float: left; width: 48%; }
div.right { float: right; width: 48%; height: 200px; background: #eee; }
div.clear { clear: both; }
you can leave out the "clear", since you dont have any content after the left and right box, but this is how you can stop floating if you want to have some content below the two boxes (even if they dont have the same height)

Answer 3

First off, +1 to Ejay, that was certainly the outcome I was after. However, a few things worried me about the implementation (notably the display: table-cell and width: 1%. I can't really fault it, because it did work, but my gut instinct was screaming at me that something wasn't right and might catch me out in the future. It did actually slightly break, dependant on container width I'd get a 1px gap in Chrome:
Anyway, it inspired me to try harder and I came up with this: http://jsfiddle.net/z6TMJ/2/
HTML
<section>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum nunc at nibh elementum vestibulum. Curabitur nisi tortor, porttitor sed facilisis vel, volutpat in quam.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum nunc at nibh elementum vestibulum. Curabitur nisi tortor, porttitor sed facilisis vel, volutpat in quam.</p>
<div>Secondary content</div>
</section>
CSS
section {
border: 1px solid red;
overflow: hidden;
}
div {
background: none repeat scroll 0 0 #EEEEEE;
margin-left: 50%;
width: 50%;
height: 246px;
border: 1px solid #000;
box-sizing: border-box;
}
p {
clear: left;
float: left;
width: 50%;
}
The paragraphs are styled in the same way, but now the div is left alone to do its natural thing. It is then positioned on the right using margin-left (removing the margin will actually make the div appear behind the paragraphs.
While this may not suit ALL scenarios, where I know a few things like the width of the container and the widths of the paragraphs and secondary content this way seems fine.