I messed up when I designed this page... I want the two side divs to go as far down as the middle one, but I kinda forgot about that...
What do I do?
Here is the page in question... Hi (<!-- m --><a class="postlink" href="http://team847.com/new">http://team847.com/new</a><!-- m --> layout/2/)Found this... Would it work?
<!-- m --><a class="postlink" href="http://www.456bereastreet.com/archive/200405/equal_height_boxes_with_css/I">http://www.456bereastreet.com/archive/2 ... with_css/I</a><!-- m --> think you can get what you want with this for the #container DIV:
What do I do?
Here is the page in question... Hi (<!-- m --><a class="postlink" href="http://team847.com/new">http://team847.com/new</a><!-- m --> layout/2/)Found this... Would it work?
<!-- m --><a class="postlink" href="http://www.456bereastreet.com/archive/200405/equal_height_boxes_with_css/I">http://www.456bereastreet.com/archive/2 ... with_css/I</a><!-- m --> think you can get what you want with this for the #container DIV:
Code:
#container {
width: 750px;
min-height:98%;
margin: 10px auto;
background-color: #888;
}So that will make the two side divs each go as high as the middle div?
I was doing further research and thought I should do the faux columns thing...
But if I just add a min-height, that's OK with me!
=edit=
that didn't work... Either I'll try the turn-divs-into-tables trick or I'll use faux columns...
=edit=
OK, I'm using the faux columns trick... Works great! Just need to get the gif to match my background color.In as much as the article you linked to says it does not work with IE, I'd go for the "faux columns" approach, which I've used succesfully a number of times. There's a pretty good article at <!-- w --><a class="postlink" href="http://www.alistapart.com">www.alistapart.com</a><!-- w --> on the subject (search for "faux column" there).Huh? this page is acting funny in firefox... What am I doing wrong? (using faux columns)
<!-- m --><a class="postlink" href="http://www.team847.com/new%20layout/2/New%20Folder/The">http://www.team847.com/new%20layout/2/New%20Folder/The</a><!-- m --> float on your #main is getting you for one thing.Why would it be messing it up?
=edit=
K, figured it out. forgot to remove a set of margins, it's fixed now. life is good.OK, I take it back. It doesn't work. The same link I provided above has it.Well you've got a clearing bottom div defined but you don't have it on the page. Also, you've got three paragraphs in that main content, not one with two breaks.And that's messing up the faux columns how?The missing div is probably causing the center div to hang out. The other is just semantic nonsense.Hmmm... I've got a working local version. FF doesn't seem to make the middle div heigher if there's too much content.
here it is:
<!-- m --><a class="postlink" href="http://www.team847.com/new%20layout/2/New%20Folder/">http://www.team847.com/new%20layout/2/New%20Folder/</a><!-- m -->
=edit=
adding the bottom div doesn't help eitherI think I'd rethink the design as a banner div on top of the container div holding the left, main and right. The content is making more sense.