Three Vertical divs, always same height?

[Jessica]

How do I make these three divs always be the same height, no matter what the content in them is?

I know how to give them a minimum that works in Fx & IE, but now that it's past the minimum, it looks wrong:

Here's what I mean:

http://www.grady.us/temp.gif

[Jessica]

It helps if I follow my own advice sometimes

 

Here's the CSS:

.introBar{
width: 240px;
padding: 5px;
float: left;
min-height: 400px;
height: auto !important;
height: 400px;
font-size: 1em;
color: #FFFFFF;
}

#about{
background-color: #353535;
text-align: justify;
}
#browse{
background-color: #404040;
}
#join{
background-color: #474747;
}

 

The HTML:

<div id="about" class="introBar">
<h1>About</h1>
<p>Blah!</p>
</div>

<div id="browse" class="introBar">
<h1>Browse</h1>
<p>blah blah</p>
</div>

<div id="join" class="introBar">
<h1>Join</h1>
<p>Blah</p>
</div>

[paul2463]

Hi Jesi

 

this might be a silly idea and may not even work but I think its worth saying and being laughed at...

 

could you not have one big div, with the 3 smaller vertical divs inside it set to 100% so all three would be same size as the outer div and that could be autoheight to the size of the three inner divs...make sense??????

[Jessica]

That still didn't work.

Here's the page, changed:

http://grady.us/scrapbook/

<div id="introBar">
<div id="about">
	<h1>About</h1>
	<p>blah blah</p>
</div>

<div id="browse">
	<h1>Browse</h1>
	<p>blah blah</p>
</div>

<div id="join">
	<h1>Join</h1>
	<p><?=SITE_NAME?> is free and it only takes a moment to join, so register now!</p>
</div>
</div>

 

#introBar{
height: auto;
}

#introBar div{
width: 240px;
padding: 5px;
float: left;
font-size: 1em;
color: #FFFFFF;
height: 100%;
}

#introBar div h1{
height: 55px;
overflow: hidden;
line-height: 100;
font-size: 0;
}

 

I also tried

#introBar{

min-height: 400px;

height: auto !important;

height: 400px;

}

[Jessica]

Well it works in IE, but not Firefox.

[wildteen88]

Dont work in IE(7) for me there jesi.

 

For having same height divs I got a tutorial bookmarked somewhere, got to look through my mess of HTML and CSS bookmarks, need to sort them out.

[Jessica]

wildteen: It worked in 6, then I changed some stuff that broke in Fx, so it probably broke again by the time you saw it

 

If you find that tutorial, I'd really love to see it. Thanks I'm off to scour Google.

 

Edit: The method I normally use is to make a background image and tile that along the container div - I'd like to try to avoid that this time and see if I can actually get the divs to work right.

 

Edit2: Here's an interesting JS approach:

http://tylerkaraszewski.com/experiments/equalheightdivs/equalheightdivs.html

 

Not going to use it, but maybe someone else will.

[wildteen88]

Umm, cant seem to find it. However the only one I have is a tutorial for faux columns which is the technique you're trying to avoid.

 

Umm just looked on alistapart.com and I think I found what you are looking for here.

[ToonMariner]

ONly way to do this is the old faux column method idf you want cross browser compatability...

http://alistapart.com/articles/fauxcolumns/

[Jessica]

I guess I'll have to use the faux-columns one.

[cmgmyr]

A real easy fix is just use a background image for introBar...just take a screenshot of your columns, select a 1px height for the whole way accross and set that as your background image. this way all of your columns will look equal.

 

I hope that made sense

[ToonMariner]

that was my impression of what a faux column was...

[cmgmyr]

yeah, but my way was a little more straight to the point instead of reading all that... haha

[Jessica]

That's also what I already said I normally do.

[lando]

A list apart just posted a new technique last week...

 

http://www.alistapart.com/articles/multicolumnlayouts/

[Jessica]

I read that one, and it looks way more complicated than the image method. I'll stick with faux columns for now I guess.

 

I like comment #9 there.

 

"Opening a keylock with a paperclips is an ingenious and spectacular magician’s act. But would you seriously buy such a lock?

 

Using negative margins is an unintended use of the standard. Boxes don’t have negative margins. How a browser handles them is not a bug but an implementation choice (a respectable one being to simply ignore out of range values).

 

A standard defines what can be done, but also what should not be done (even if it can be done). This is where many css techniques abuse the standard.

 

I think this is a real issue. As a newbie, I buy solutions such as this one, thinking that I am investing in a solid foundation. Then I try to add a menu or an image or even a simple italic, and have no clue why things suddenly mess up. As it dawns to me that I am really investing in implementation exploits, I am ready to throw away this whole css mess altogether. Now that would be an unintended consequence?

 

My apologies if this sounds as a harsh critique on this work. It is a superb solution to a real problem. Only it requires a magician to make it work in daily life."

[lando]

To be honest I tried to implement the technique over the weekend and ran into IE6 issues with the negative margins... but I thought I would at least introduce the solution as it might help someone else.

[obsidian]

To be honest I tried to implement the technique over the weekend and ran into IE6 issues with the negative margins... but I thought I would at least introduce the solution as it might help someone else.

 

No kidding. IE6 is a pain when it comes to depending on negative margins. jesi, I agree with the consensus that, as of now at least, faux columns are the way to go. However, I would encourage simply applying a content wrapper around your three columns and using the CSS only clearfix for IE6.

 

I implemented it in my sandbox here for anyone that's interested in seeing the method I regularly use. Yes, it's still using faux columns, but the markup stays quite clean with this CSS fix.

 

Hope it helps someone... once you have the entire method down, it only took about 20 minutes to set the whole thing up.

[Jessica]

Since I already had the CSS from the last time, it just took me the few seconds to recolor the image

[obsidian]

Since I already had the CSS from the last time, it just took me the few seconds to recolor the image

 

Good call. I figure after some of the other time comments made in other recent threads that 20 minutes from start to finish, including image creation, hand coding all styles and posting the site was not too bad.

 

Definitely better to modify one that's already there, though.