There are often cases where you want to display content in a div, but a fixed height won't work. It the height is too little, content is cut off or you need a vertical scrollbar (by setting the overflow value). If the height is too much, you'll have a lot of whitespace. The example below shows you how to easily create a div that autosizes based on the content.
1//HTML:
2<div id="outerDiv" class="autosize">
3 <div id="innerDiv" runat="server" style="display: block">
4 //Content...
5 </div>
6</div>
7
8//CSS:
9#outerDiv
10{
11 min-height: 200px;
12}
13
14div.autosize { display: table; width: 1px; }
15div.autosize > div { display: table-cell; }
Comments
|
On
1/8/2010
samuelgilman
said:
Thanks for the info. I have found this code twice. This code is explicit but doesn't work in IE7.
On
1/8/2010
sakis
said:
It does not work !!
On
1/8/2010
Pierre Loubert
said:
On
1/8/2010
Pierre Loubert
said:
Neat trick, I've been looking for an easy solution to a navigation bar for a few days, this works in every browser with the exception of IE7!
|
Leave a Comment