Problems having a div-wrapper collapse around two div-columns

[atlibj]

Hello all of you, I just ran into this great site and decided to join the forum, since I'm a total newbie in CSS design. (I'm also a former tables geek).

Well, here's my first post ;)

I'm having some problems with getting the height of a div-element to collapse around two additional div's used as culumns. Therefore I have not specified the height of the main element, althought I specified the width.

I want these two additional div-elements to be inside the main one and create two columns. I also want the height of the tallest one in any given incident to define the height of the main div-element.

What is the best/correct way to do this?

Here's my best try and it just won't work:

#main {
background: red;
width: 400px;
}
#left {
background: blue;
width: 200px;
float: left;
}
#right {
background: green;
width: 200px;
float: left;
}

<div id="main">

<div id="left">
<p>blabla</p>
<p>blabla</p>
<p>blabla</p>
</div>

<div id="right">
<p>blabla</p>
<p>blabla</p>
</div>

</div>

The background colors are just used for graphic descriptions. As you can see the left column is supposed to be a little bit taller than the right one.

If you regard the background colors the result should of course look something like this:
<img src="http://example.com/lmk/description.GIF" width="223" height="55">

[edited by: SuzyUK at 2:24 pm (utc) on Jan. 27, 2006]
[edit reason] examplified URL [/edit]

[Fotiman]

Welcome to the forums!

In order for you #main to "contain" the floated blocks, #main must also be floated. Try making it float and see if that helps.

[atlibj]

Thank you :)

Well, I had already tried that and it doesn't work either. But actually this makes the main element obtain the same height as the right element (whether I let it be the smallest or the tallest column), but as I mentioned before I'd like it to have the same height of whichever column that's tallest. In this case it's of course the left element. Still it doesn't seem to matter how tall I let the left be, the main element always obtains the height of the right one.

Before I specified a float on the main element it's height seemed to be 0.

I think we're really close to solving this, but I'm just not that familiar with the fundamentals of these div-elements :(

[atlibj]

Wow, a little update!

The main element now DO obtain the height of whichever column that's tallest, but it doesn't show until I open the page in a browser?

(seems to work fine in both IE and Firefox)

But in Dreamweaver it's still wrong! Is there a more correct way to do this, or is it just a rendering error in Dreamweaver only that I don't need to worry about?

[Fotiman]

When I view the code that you have above after adding float: left to main, I see something that looks like this:

+------------------------------+ 
¦`Blue `````````¦'Green '''''''¦ 
¦```````````````¦''''''''''''''¦ 
¦```````````````¦''''''''''''''¦ 
¦```````````````¦--------------+ 
¦```````````````¦.Red..........¦ 
¦```````````````¦..............¦ 
¦```````````````¦..............¦ 
+------------------------------+ 

That is, the red continues to the height of the #left, which happens to be taller. If I add content to #right to make it taller, then I see this:

+------------------------------+ 
¦`Blue `````````¦'Green '''''''¦ 
¦```````````````¦''''''''''''''¦ 
¦```````````````¦''''''''''''''¦ 
+---------------¦''''''''''''''¦ 
¦.Red...........¦''''''''''''''¦ 
¦...............¦''''''''''''''¦ 
¦...............¦''''''''''''''¦ 
+------------------------------+ 

Is that not what you are going for?

EDIT: We cross posted. :) Glad it's working. I'm not familiar with Dreamweaver, so I couldn't tell you how to get it to do what you want. Good luck though.

[atlibj]

Thanks, and yes, it works exactly the way it should (and the way you described here) :)

I'm sure it's just a minor rendering error in Dreamweaver. At least IE, Firefox and Opera render it correctly so it's probably nothing to worry about.

Well, thanks again for your help! This saved me a lot of time :)

[atlibj]

Well now, another problem just popped up :/

The only way I'm able to make this work as descibed above, is to float the main element as well.

But the problem is that the main element is supposed to be centered #$%& ...and the only way I know to make that happen is to NOT having a float on it and a margin set to "auto".

And that throws me back to square one :(

Anybody have a solution for this?

[Fotiman]

Add another wrapper around main. Give that wrapper the centering, and make it the same width as main:

body {
text-align: center;
}
#container {
width: 400px;
margin: 0 auto;
}