How do you make a div that can expand according to it’s content

@slaughtersJul 01.2008

I want to make a DIV’s width be sized according to it’s content in IE.

If you specify no width in IE the DIV automatically goes to 100%

If you specify a specific width in IE, but your content is larger than the width your content is chopped off or a scroll bar appears (depends on how you set the overflow property)

So – How do you make a div that can expand according to it’s content (in IE) ?

A non-JavaScript approach would be nice.

to post a comment

CSS

5 Comments(s) _↴

@vinays84Jul 01.2008 — #Place it in a table cell. Create a table with one row and one cell, then place the div inside there. The div will expand to its container (the cell), which in turn expands based on its inner content (whatever is in the div).

@slaughtersauthorJul 01.2008 — #Thanks,

I was doing it that way, but it was real awkward to put

[code=html]<table border=0 cellspacing=0 cellpadding=0><tr><td><div class="container">
 .
 .
 .
 </div></td></tr></table> [/code]

Around every table I wanted to place inside the div.

I was hoping for a solution that just let me do

[code=html]<div class="container">
 .
 .
 .
 </div>[/code]

P.S.

I just realized that it would be nice to have a Firefox solution as well. I figured out how to do it with IE using CSS expressions for the width.

[CODE] width: expression( (this.childNodes[0].clientWidth) + 'px' );[/CODE]

Of course this assumes that the first child in the div is the content who's width you want to match with and of course it is an IE only solution

@Declan1991Jul 01.2008 — #Don't use the expression solution because it's evaluated every time an event happens (including every time you move the mouse). Have you a specific problem with a layout?

@slaughtersauthorJul 01.2008 — #I'm trying to come up with a cleaner solution to allowing a table body to scroll while it's thead remains fixed in place.

Firefox allows styles to be applied to TBODY (height and overflow) that IE ignores.

Since IE ignores height restrictions on tables the way to get this to work in IE is to place the table in a div container of a specific height with overflow-x set to scroll or auto.

Since this still allows the head to scroll you set the thead to a postion: relative (which is ignored by firefox).

Unfortunatly Safari just lets the whole table scroll, not fixing the header in place.

Here is a semi-solution to the problem so far: Works in Firefox 2 and 3 and IE 7 (should work for IE 6 as well).

[code=html]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html>
 <head>
 <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
 <title>Lock Table Headings</title>
 
 <style type='text/css'>
 
 /* Scrollable Content */
 .scrollContent {
 overflow-x:hidden;
 overflow-y:auto;
 }
 
 .scrollContent tr {
 height: auto;
 white-space: nowrap;
 }
 
 /* Prevent Mozilla scrollbar from hiding right-most cell content */
 .scrollContent tr td:last-child {
 padding-right: 20px;
 }
 
 /* Fixed Header */
 .fixedHeader tr {
 position: relative;
 top:0;
 left:0;
 height: auto;
 /* this fixes IE header jumping bug when mousing over rows in the tbody */
 top: expression( this.parentNode.parentNode.parentNode.scrollTop + 'px' );
 }
 
 /* Fixed Header */
 .fixedHeader tr td {
 border-bottom:1px solid #000000;
 background-color:white;
 }
 
 /* Put container around table to constrict the height for IE (IE ignores the tbody height style) */
 div.TableContainer {
 overflow-y:auto;
 
 /* this fixes IE so container width is same as table width */
 width: expression( (this.childNodes[0].clientWidth + 24) + 'px' );
 }
 
 </style>
 
 </head>
 <body>
 
 Lock Table Headings<br />
 <br />
 
 <div class="TableContainer" style="height:130px">
 <table cellspacing=0>
 <thead class="fixedHeader">
 <tr><td>Title #1</td><td>Title #2....</td><td>Title #3.......</td><td>#4</td></tr>
 </thead>
 <tbody class="scrollContent" style="height:100px;">
 <tr><td>Item 1</td><td>Item 2</td><td>Item 3</td><td>Item 4</td></tr>
 <tr><td>Itemb5</td><td>Item 6</td><td>Item 7</td><td>Item 8</td></tr>
 <tr><td>Item 1</td><td>Item 2</td><td>Item 3</td><td>Item 4</td></tr>
 <tr><td>Itemb5</td><td>Item 6</td><td>Item 7</td><td>Item 8</td></tr>
 <tr><td>Item 1</td><td>Item 2</td><td>Item 3</td><td>Item 4</td></tr>
 <tr><td>Itemb5</td><td>Item 6</td><td>Item 7</td><td>Item 8</td></tr>
 <tr><td>Item 1</td><td>Item 2</td><td>Item 3</td><td>Item 4</td></tr>
 <tr><td>Itemb5</td><td>Item 6</td><td>Item 7</td><td>Item 8</td></tr>
 <tr><td>Item 1</td><td>Item 2</td><td>Item 3</td><td>Item 4</td></tr>
 <tr><td>Itemb5</td><td>Item 6</td><td>Item 7</td><td>Item 8</td></tr>
 <tr><td>Item 1</td><td>Item 2</td><td>Item 3</td><td>Item 4</td></tr>
 <tr><td>Itemb5</td><td>Item 6</td><td>Item 7</td><td>Item 8</td></tr>
 <tr><td>Item 1</td><td>Item 2</td><td>Item 3</td><td>Item 4</td></tr>
 <tr><td>Itemb5</td><td>Item 6</td><td>Item 7</td><td>Item 8</td></tr>
 <tr><td>Item 1</td><td>Item 2</td><td>Item 3</td><td>Item 4</td></tr>
 <tr><td>Itemb5</td><td>Item 6</td><td>Item 7</td><td>Item 8</td></tr>
 </tbody>
 </table>
 </div>
 
 </body>
 </html>[/code]

@slaughtersauthorJul 02.2008 — #I posted a thread over in the JavaScript forum side showing what I was attempting to do with this:

Instead of double posting I'll just point a link over there for anyone interested:

http://www.webdeveloper.com/forum/showthread.php?t=185367

Still not sure if it works in IE6.

Also in #CSS _↴

Title In All Caps [RESOLVED] Not greying a disabled object inner width for netscape with css

Success!

Help @slaughters spread the word by sharing this article on Twitter...

Tweet This

How do you make a div that can expand according to it’s content

5 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

How do you make a div that can expand according to it’s content

5 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

5 Comments(s) _↴

Also in #CSS _↴