StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Because of the way the <a href="http://css-tricks.com/the-css-box-model/" rel="noreferrer">CSS box model</a> works, having 2 boxes next to each other whose combined width adds up to 100% (or the width of its container) will cause one box to be pushed down below the other in many cases.</p> <p>You should make sure you have no margins, padding, or borders on your two column elements. This will be <em>added</em> to the width of your elements, in addition to the 70%/30% widths you have for your columns. </p> <p><strong>UPDATE:</strong> As ricebowl mentioned in the comments, many browsers have rounding errors that result in more than 100% width being rendered. This can be seen on <a href="http://positioniseverything.net/round-error.html" rel="noreferrer">PositionIsEverything's demo page</a>. I've updated my answer to take this into consideration. </p> <p>I've also updated my solution to include a fix for the column overflow problem you mentioned. Now, if the content is too large for the columns, a scrollbar will appear. If you don't want scrollbars, you can use <code>overflow-x: hidden</code> instead, however this will cut content off.</p> <pre><code>/* Reset all margin, padding, border to baseline */ #container, #sidebar1, #mainContent { margin: 0px; padding: 0px; border: 0px; } /* Apply styles for column layout */ #container { width: 100%; overflow: auto } #sidebar1 { width: 29%; float: left; overflow-x: auto } #mainContent { width: 69%; float: right; overflow-x: auto } </code></pre> <p>A live demo of this can be seen here: <a href="http://jsbin.com/eyise" rel="noreferrer">http://jsbin.com/eyise</a></p> <p>I just tested this out in Firefox 3.5, IE7, IE8, & Google Chrome 3. It works identically in all three browsers. I would avoid using <code>display: inline-table;</code>. In my experience, I've never had very much luck using it consistently across all browsers.</p> <p>If you need to add a border, do so using <a href="http://www.alistapart.com/articles/fauxcolumns/" rel="noreferrer">faux columns</a> on the container element. And since you're obviously doing a liquid layout, you may also want to read this article on <a href="http://www.communitymx.com/content/article.cfm?cid=afc58" rel="noreferrer">liquid faux columns</a>.</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