General Question

klaas4's avatar

How to give 3 floated div's the same height in CSS?

Asked by klaas4 (2176points) April 22nd, 2009

Hello, long time no see!

I’m making a layout in which, uhmm, let me just show it.

<div style=“width: 100%”>
<div style=“float:left; width: 33px; background: repeat-y url(images/content_l.png);”><!—no content—></div>
<div style=“float:left; margin-left: 33px; margin-right: 33px; background: white;”>content, blabla</div>
<div style=“float:right; width: 33px; background: repeat-y url(images/content_r.png);”><!—no content—></div>
</div>

Now my problem is that floating div 1 & 3 are background images, (together with the rest of my code which already works, it forms a box with rounded corners) and I want those 2 to have the same height as the 2nd floating div (with the content).

I have absolutely no clue how to do this. It just doesn’t work. So I thought, maybe a fellow-jellyfish would. =)

Okay, good luck ;) and thanks in advance!

Davey.

btw. My layout is here.

Observing members: 0 Composing members: 0

10 Answers

klaas4's avatar

Never mind. I’ve gone back to tables. (but only for that part)
Div’s can be very, very, very painful sometimes…

tonystubblebine's avatar

I support your decision. I think people who think tables are ugly are not being honest about some of the hacks required to make floating divs work.

noyesa's avatar

I don’t think too many people are opposed to tables because they’re ugly, but because it’s a semantically improper way to mark up presentational elements. Tables are for tabular data, not background images, spacers, and the like. I would recommend that you revisit doing this in CSS. I don’t have a solution off hand, but I can say that one of your <div> elements is superfluous. Generally this layout works best if you have one element that contains your left-hand rounded corners, both top and bottom, and another element, such as a <p> or another <div> (remember, try to remain as semantic as possible) that has a background, fixed on the right side, that makes up the right corners, both top and bottom.

klaas4's avatar

@noyesa Thanks, but I think I won’t. Now that I’ve used tables, the site works beautifully in IE6, and if I resorted to using divs and css, I’d have to use a lot of hacks to get it right in IE6.

Thanks for replying though. :)

jumpo7's avatar

This question is somewhat old but for the benefit of those who may come later here are some resources for creating/controlling layouts with CSS:

Maxdesign
Incutio
glish

As you can see it is possible to do exactly what was requested with CSS.

martijn86's avatar

It hurts to see people abandoning divs/css for table’s! With all respect, what-ever works for you is fine.. But I’d say, put a little effort into getting the hang of how div’s work, you WILL praise them.

Second, there are templates to be found everywhere on the web. Use them if you can and learn while adjusting them.

I guess you don’t want to know my ideas on that rounded box with divs?

martijn86's avatar

Oh and always work one version of every browser behind, but never more then one. You want everyone to see your site correct but you also don’t want to be to limited in what you do. You can’t please every ‘90s computer.
Having said that, IE6 isn’t that bad. Well it is bad but properly layed out div’s with valid css markup never appeared any different in my case.

pygeek's avatar

<div id=“some_height_container>
<div class=“some_height”></div>
<div class=“some_height”></div>
<div class=“some_height”></div>
</div>

/* CSS FILE */
div.some_height_container{
height: 400px
}
div.some_height{
float: left;
height: 100%;
width: /some_height_containers width divided by 3 minus borders/margin/etc../

Hope this helps.
PS: Haven’t tested it, but it should work.

Answer this question

Login

or

Join

to answer.

This question is in the General Section. Responses must be helpful and on-topic.

Your answer will be saved while you login or join.

Have a question? Ask Fluther!

What do you know more about?
or
Knowledge Networking @ Fluther