side by side divs inside of div

I am just trying to have two divs next to each other in another div. Here is my code:

<div class="container">
    <div class="div1">Div 1</div>
    <div class="div2">Div 2</div>
</div>

Here is the css:

.container {
background-color:#999999;
width:500px;
}

.div1 {
background-color:#dfe0e1;
float:left;
display:block;
margin-right:5px;
}

.div2 {
background-color:#BAD9FC;
float:left;
display:block;
}

Here is the link to an example:

http://demo.thinksys.com/css/1.cfm

IE sees the two div tags next to each other and the container div. FF does not show the container div unless I specify the height which I do not want to do because I want it to be dynamic. And even if I do specify the height if it is not more than the space that div1 and div2 are taking it sits div1 and div2 on top of container.

Any help on this would be great.

Thanks in advance.
thinksysincAsked:
Who is Participating?
 
Mark StegglesConnect With a Mentor Web DeveloperCommented:
Hello,

You simply need to clear your floats (which you should always do) because floats are taken out of the flow and the parent will not contain them as it does not think that it contains them.

3 ways to fix:

1) add overflow:auto to .container css
2) add a clearing element:

<div class="container">
    <div class="div1">Div 1</div>
    <div class="div2">Div 2</div>
<p style="clear:both;height:1px;line-height:1px;overflow:hidden;"></p>
</div>

3) if possible, float the parent aswell



Steggs
0
 
KhoiNqqCommented:
Yah, always clear your floated element
0
 
thinksysincAuthor Commented:
Thanks for the help. I got it working now. So is it accurate to say that once you float one element each element after will also float unless you clear it?
0
 
Mark StegglesWeb DeveloperCommented:
No that is not correct. Floating  an element will not make other elements floated

0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.