[SOLVED] DIV variable height

[smc]

Hello everyone,

 

I'm trying to make an XHTML style page and as such am using pretty much all div layers. Now usually I use tables but with DIV layers I'm not sure on something.

 

I have two div layers side by side, one float left, one right. I need it so that both these div layers match the same height (as one is a menu and one is a content block). A picture is below:

 

 

How can I make it so that the left would match the height of the right or visa versa, depeneding on whichever one is longer?

 

Thanks!

[Jtech]

Its pritty easy by using CSS just give the divs the same id="#"

 

<style>

   .Heights { height:100%; }

</style>

 

hope that helps

[smc]

Tried that but it didn't make a change. Heres the code (I have two different divs for the sections)

 

#content_body {
width: 703px;
height: 100%;
background: url('/images/background-repeat.jpg') repeat-y;
position: relative;
float: left;
}

#menu {
width: 197px;
height: 100%;
background: url('/images/menu_repeat.jpg') repeat-y;
position: relative;
float: right;
}

 

<div id="menubar">
</div>

<div id="content_body">
;</div>
<div id="menu">
</div>

[kael.shipman]

Unfortunately, in my experience you can't really accomplish this without jumping through some pretty fiery hoops. Between the absolutely infuriating browser interpretations and the lack of real layout constructs in HTML, I think you may be better off just going with tables.

 

I always respect a layout with divs, but when you think about it, that element is a hack anyway. Web design in the current era requires a photoshop-like canvas with the ability to code shapes, use layers, drop shadows, round off edges, etc., and modern HTML just isn't up to that challenge, which is why you see that so many of the best sites are essentially drawn in photoshop, cut up, then transferred image by image to the unwieldy web canvas, where they fall victim to problems in dimension rendition, how borders are applied, z-index issues, and a host of other problems that require variations in whole stylesheets to correct.

 

I'm actually just about to post a question about this, so hopefully I'll find out that the preceding hopelessness is unfounded.

 

Good luck!

 

Kael

[ToonMariner]

Its pritty easy by using CSS just give the divs the same id="#"

 

No 2 (or more) elements on a page should have the same id. ID is used to uniquely IDentify an element in the DOM. Shoudl you require any js to work on the elements it will fail.  If you wish to apply the same styleing to more than one element then you should use a class...

 

The answer to the OP is to not float one of the divs, give the floated div a height: 100%.  All is fine in modern browsers but you will need to use faix columns to get ie6 to play ball http://alistapart.com/articles/fauxcolumns/

 

PS. Sorry Kael but html is NOT for design so this idea that it needs a Photoshop canvas is far from the truth. There are beautifully designed sites out there all created with tableless layouts and some inventive css (and in some cases - no hacks).