StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p><em>Edited Jan 21, 2010 @ 21:00 MST :</em> You need to float the parent div to the right. Originally I also floated the child divs right, but this caused trouble in IE7. If you have Firebug, take a look at <a href="http://3roadsmedia.com/stackoverflow_test.html" rel="nofollow noreferrer">this test page</a>, which has the result you're after. I tested in Firefox 3.5, IE7, IE8, Chrome, and Safari 4.</p> <p>Here is the relevant CSS and HTML (I added some margin/padding and background colors so you can more easily see the effect):</p> <pre><code> <style type="text/css"> #parent { margin:0; background:#ccc; float:right; padding:20px; } #parent div { background:#eee; margin:0 0 20px; text-align:right; } </style> ... <div id="parent"> <div>Nulla facilisi. Suspendisse potenti. Sed sed euismod tortor.</div> <div>Lorem ipsum, pharetra nec justo. In dapibus neque a libero cursus a laoreet nunc luctus.</div> <div>Lorem ipsum dolor sit amdolor.</div> </div> </code></pre> <p>My guess as to why the original didn't work is that IE7 has a number of documented bugs (<a href="http://www.gtalbot.org/BrowserBugsSection/MSIE7Bugs/" rel="nofollow noreferrer">see here</a> for a list, which includes links to several float bugs). If you float both the parent and child elements to the right, you get the desired results in IE8 and other modern browsers, but in IE7 the parent's width won't collapse to the width of the widest child (enter mischievous bug).</p> <p>IE7 behaves as expected if you float both the parent and child elements to the <strong>left</strong>, however (but this isn't what you were after).</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload