Our html content:
<div id="sidebar">sidebar</div> <div id="content"> This is the beginning of content div. <img class="cat-img" alt="" src="http://eofdreams.com/data_images/dreams/cat/cat-08.jpg" /> This is a very large page of content. I mean. Really. Really really large.</div>
First way (not sure about cross-browser):
#sidebar { background: pink; float: left; } #content { background: yellow; overflow: hidden; }
First way, complete version. Note both html and body needs to have height:100%
html { height: 100%; } body { margin: 0; height: 100%; } #sidebar { background: pink; float: left; height: 100%; } #content { background: yellow; overflow: hidden; height: 100%; }
Second way, use display:table, and display:table-cell. Bonus point: now you can use vertical-align:middle to vertical-align text in #sidebar.
Note:
- Vertical-align on a display:table-cell means where to display INNER content relative to the height of the table-cell.
- Vertical-align on a display:inline-block means where to display NEIGHBOURS relative to the height of the inline-block.
body { display: table; margin: 0; } #sidebar { display: table-cell; background: yellow; } #content { display: table-cell; background: gray; }
Third way, use flex. Only available in modern browsers. But allow each children to distribute according to flex-ratios
. Check compatibility with http://caniuse.com/
#page { display: -webkit-flex; -webkit-flex-direction: row; } #sidebar { background: pink; -webkit-flex: 1; } #content { background: gray; -webkit-flex: 2; }
Add this awesome reference: http://www.boutell.com/newfaq/creating/threecolumnlayout.html