Fluid height from content or 100% height image [Archive]

cwestney

08-23-2005, 02:28 PM

Hi everyone,

I'm trying to have a fluid div, containing two columns, with the height inherited from whichever column has the greatest height.
The first 'column' is the nav, and increasing or decreasing the list items does set the containing divs height - so far so good.
The second 'column' contains an image. The image is set to 100% width and height. But the containing div doesn't pick up the image height and expand accordingly.

Also, I've got transparent 'stripes' that sit across the top of the image. In FF they stay at 100% of the height of the image at any window size. But IE doesn't pick up the height, and they stay at just one line height.

The only site I found that addressed this exact issue, said it couldn't be done..... Am I asking the impossible? It seems like a resonable design to me!

Many thanks for any help | advice | links etc.
Charlotte.

HTML code below, CSS file attached.

<body>
<div id="headercontainer">
<div id="containerleft">
<div class="mainmenu">
<ul>
<li>Visiting</li>
<li>Learning About</li>
<li>Looking After</li>
<li>Living In</li>
<li>Visiting</li>
<li>Learning About</li>
<li>Learning About</li>
<li>Looking After</li>
<li>last one</li>
</ul>
</div>
</div>
<div id="containerright"><div id="column1">1</div><div id="column2">2</div><div id="column3">3</div><div id="imagecontainer"><img src="homepage630.jpg" width="100%" height="100%"/>
</div></div>
</div>
</body>

COBOLdinosaur

08-23-2005, 11:02 PM

You have a problem here:

#containerright
{
width:80%;
height:inherit;
float:right;
background-color: #aeaa91;
position:absolute;
left:20%;

}

It is not going to pick up the height of the content if you specify a height. So take the ehight out.

Then you have contradictory code. The browser can float it, or or it can position it; it can't do both and still give you anything that will pass for correct rendering. If you want it 20% to the right of the normal float position then get rid of the position and use margin-right:20% which is compatible with the float.

If you still have a problem then post a link to the page. It i seasier to solve these problems if I can see them. Getting them the same height will probably require require script because the normal behaviour of div is to either accept a fixed value and be static or dynamically size to content. if you want siblings to be the same height you have to either give the them same specific height, or use scripting to set them both to he height of the tallest one.

Cd&