On my website I have always avoided using display values that start with table. That was clearly a mistake. So today I bring you a guide on how to build columns so that when you add some content, for example with JavaScript, the #content element automatically grows in height without any height calculation in JavaScript or other JS tricks. I won’t say much more; instead, take a look at the code along with the comments to make it easier to understand. It is possible that some of the declarations of CSS you see here won’t be needed, but you will find that out yourself if it doesn’t work the way it should.
/*r as in row, i.e. the wrapper of the whole row that contains the vertical navigation and the content*/
#r {
display: table-row;
}
/*The important thing here is to set float:left; and a width that matches the width of your layout*/
#nav {
width: 250px;
float: left;
}
/*Here it is important to set everything you see; set the width to suit you in *px*/
#content {
float: right;
width: 750px;
height: auto;
}
/*Of course, after two float divs side by side, you need to tell the browser that you won't be adding any more columns with clear:both*/
#paticka
{
clear: both;
}The HTML code is then even simpler. You simply write divs with the IDs #nav, #content and #paticka one after another (not nested inside each other) and wrap the whole thing in a #r div.
<div>
<div>Navigation</div>
<div>Page content</div>
<div></div>
</div>The result is that even when I add the HTML code of a comment with JS, the page always adjusts its height automatically:
