Menu
Hi, I have a question about properly setting up a vertical grow of an outer div.
What I try to do is to have two divs, left and right, if one div grows, the outer div grows with it as well.
Ths markup below works as I wanted in IE 6 and IE 7, to my surprise. But it doesn’t work in FF, Safari and IE 8 beta.
<!– the outer div –>
<div style=”width:500px; border: 1px solid red”>
<!– inner left div –>
<div style=”float: left; width: 49%; margin: 0; text-align: justify; border: 1px solid blue;”>
BLAH!<br/>BLAH!<br/>
</div>
<!– inner right div –>
<div style=”float: right; width: 49%; margin: 0; border: 1px solid green”>
BLAH!<br/>BLAH!<br/>
</div>
</div> <!– end of outer div –>
However, if I add “float: left” to the outer div like this:
<!– the outer div –>
<div style=”[COLOR=”Red”]float: left;
<!– inner left div –>
<div style=”float: left; width: 49%; margin: 0; text-align: justify; border: 1px solid blue;”>
BLAH!<br/>BLAH!<br/>
</div>
<!– inner right div –>
<div style=”float: right; width: 49%; margin: 0; border: 1px solid green”>
BLAH!<br/>BLAH!<br/>
</div>
</div> <!– end of outer div –>
Then it works as I want. Even tho it works, I still find this awkward. And the fact that the first method doesn’t work on the standard but on the IE 6 and 7, leads me to think that I did something wrong. I wonder what is the proper way to do it?
Thanks