Make div auto-fit contents with inside left & right alignment

@Frank62Aug 27.2011 — #This works in IE8+ (remove the compatability tag) and the standards-compliant browsers, but not in IE6/7:

[code=html]
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <title>Demo</title>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
 <style type="text/css">
 div {
 border: 1px solid black;
 margin: 3px;
 white-space: nowrap;
 }
 #container {
 float: left; /* floats also make divs shrink-wrap */
 }
 p.left {
 float: left;
 margin: 0;
 }
 p.right {
 float: right;
 margin: 0;
 }
 .clearingDiv {
 clear: both;
 margin: 0;
 border: 0;
 }
 </style>
 </head>
 <body>
 <div id="container">
 <div id="upperDiv">
 <p class="left">1</p>
 <p class="right">2</p>
 <div class="clearingDiv"></div>
 </div>
 <div id="lowerDiv">Text that the outer div should adjust to</div>
 </div>
 </body>
 </html>
 [/code]

I tried getting it to work in IE7 as well, but didn't succeed. What does work in all browsers is a simple table:

[code=html]
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <title>Demo</title>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <style type="text/css">
 table, td {
 border: 1px solid black;
 }
 p.left {
 float: left;
 margin: 0;
 }
 p.right {
 float: right;
 margin: 0;
 }
 .clearingDiv {
 clear: both;
 }
 </style>
 </head>
 <body>
 <table cellpadding="0" cellspacing="3" summary="cute table">
 <tr>
 <td>
 <p class="left">1</p>
 <p class="right">2</p>
 <div class="clearingDiv"></div>
 </td>
 </tr>
 <tr>
 <td>Text that the outer div should adjust to</td>
 </tr>
 </table>
 </body>
 </html>
 [/code]

Validates just as well, and since the data are dynamically generated and can therefore be re-used with another make-up very easily, there is no reason not to use a table.

Make div auto-fit contents with inside left & right alignment

2 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

Make div auto-fit contents with inside left & right alignment

2 Comments(s) ↴

Also in #CSS ↴

Success!

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

Social

Version

2 Comments(s) _↴

Also in #CSS _↴