Bob Schwartz wrote:
I had hoped for some real "solutions" when I posted my original two
cents, but none came. I can only conclude there are none, yet.
I did think more than Rimantas would pop-up with a quick answer for your
question, Bob:
Which browser can correctly render the following:
3 columns, no height defined and a background color different from that of the
body
in column 1 goes a 1000px high image
in column 2 goes a 750px high image
in column 3 goes a 500px high image
the end result should be that all three columns are the same height
in other words:
below the image in column 1, no background color shows
below the image in column 2, 250px of background color shows
below the image in column 3, 500px of background color shows
My response (just for the record!) has a problem displaying the
background colour on Netscape 4.78 and Netscape 6.2 (as far as I can
tell via Browsercam), but otherwise rendering is pretty similar:
HTML:
<div id="container">
<div class="column">
<img src="notableimg.jpg" height="1000" width="100" alt="" />
</div>
<div class="column">
<img src="notableimg.jpg" height="750" width="100" alt="" />
</div>
<div class="column">
<img src="notableimg.jpg" height="500" width="100" alt="" />
</div>
</div>
CSS:
* { margin:0; padding:0; }
body { background-color:#ff0; }
#container { width:90%; background-color:#fff; float:left;
margin-left:5%; _margin-left:2.5%; }
.column { float:left; width:33%; text-align:center; }
.column img { display:block; margin:0 auto; }
Have a look at <http://www.stuarthomfray.co.uk/3col/>
Unfortunately, due to the behaviour of our good buddy PC IE, an extra
hack is called for (the '_margin-left: 2.5%;')
I thought someone else might as well answer your request! ;)
cheers,
Stuart
--
http://www.stuarthomfray.co.uk/
******************************************************
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
******************************************************
