Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

side by side divs inside of div

Posted on 2007-10-16
4
Medium Priority
?
1,595 Views
Last Modified: 2008-01-09
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.
0
Comment
Question by:thinksysinc
  • 2
4 Comments
 
LVL 30

Accepted Solution

by:
Mark Steggles earned 2000 total points
ID: 20087237
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
 
LVL 3

Expert Comment

by:KhoiNqq
ID: 20091252
Yah, always clear your floated element
0
 

Author Comment

by:thinksysinc
ID: 20094103
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
 
LVL 30

Expert Comment

by:Mark Steggles
ID: 20095313
No that is not correct. Floating  an element will not make other elements floated

0

Featured Post

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
Strategic internal linking is often considered an SEO power technique, especially for content marketing. Do you need to hire an SEO agency to optimize you internal linking? No, this article will help you understand the basics of internal linking and…
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
Suggested Courses

810 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question