CSS/positional question -- height of one div = height of another div

[Dak]

So... if i want to make a webpage with three divs, layed out like so

 

My question is: is there an easy way to tell the div on the right to increase in height to match the one on the left?

[Cap'n Refsmmat]

No.

 

What you can do is have a footer div (with clear:both) that supplies the bottom border for both of them, so that it'll at least look like they're the same height.

[Dak]

I can see why that should work (the footer div should drop down, pulling the bottom of the right div that it's in, untill it is level with the left div), but it doesn't seem to work.

 

I put this in:

 

__________

 

<div class="right">

 

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh eu</p>

<div style="clear: both;">. </div>

</div>

 

___________

 

Was that what you meant?

 

[edit]hmm... i think you've given me enough of a clue tho, ill go and think about it.[/edit]

[Cap'n Refsmmat]

That's not quite what I meant. I meant a footer div at the bottom, outside of the other two.

[Dak]

like this (the blue div)?

 

I cant see how to drop the left div's bottom down to it.

 

i tried putting the left, right, and footer divs all in a div, and tried setting the height of the left div to 100%, hoping it would fill the whole containing-div, but no. no it did not.

 

balls is what i say. this is confusing

[Cap'n Refsmmat]

Ah, you have a border on it. Well, I frankly have no idea. I've gotten two-column layouts to work (the longer column has the border on it, and the footer has a border, so it looks like they're both of the same length) and such, but no three-column ones. Your best bet would be a table (!).

[Dave]

It's fairly easy to do, but it requires a bit of trickery. Personally I would float the left hand sidebar to the left, the right hand sidebar to the right. Then you can set up the content div to have the appropriate left and right hand side margins so that the content doesn't wrap around. To get the borders, create a container div that wraps all three of them, and then you can assign the various border sides etc to get the border layouts you want.

 

I'll try and come up with an example if I get the time and you need it. But I'm fairly sure that's the general idea.

[Dak]

Hangon, wait.... ignore the borders, i'd just be happy knowing how to match the heights of the side bars.

 

And cheers muchly both for the help

[Dave]

Well, there's no actual way of making the toolbars the same height. The fact of the matter is though that you don't need to, as long as you can make it look as though they are the same height. I will try and make an example for you a little bit later, but right now I'm fairly busy so I can't. If I don't get back to you, just PM me and I'll try to come up with something.

[Dak]

Thank you very much

 

I don't know why, but this has been really stressing me out the fact that the "height: 100%" bit didn't make the div take up the whole height of the containing div just really annoyed me for some reason

 

Usually i find it quite fun trying to figure stuff like this out.

[1veedo]

I dont really like CSS. Or at least not as a "replacement" for tables. It handles cool tricks well, like highligting (instead of Javascript), but it cant seem to format right. I leave the CSS version of my site up hopping that I'll fix it. So I guess I might as well ask.

 

I want the site to look like this, more or less:

http://1veedo.homelinux.com/index-2.php

 

At the main site, the bottom gets pushed off. You can see it on the "short" page here, http://1veedo.homelinux.com/index.php?1veedo=articles . I found several sites telling me to make one big CSS table and then a bottom one to enclose things in but it never worked. I found a site that advertised exactally what I wanted to do yet for some reason firefox, konqueror, and IE show the same thing.

[bascule]

It can be done with JavaScript