side by side divs inside of div

Posted on 2007-10-16
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>

Here is the css:

.container {

.div1 {

.div2 {

Here is the link to an example:

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.
Question by:thinksysinc
    LVL 30

    Accepted Solution


    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>

    3) if possible, float the parent aswell

    LVL 3

    Expert Comment

    Yah, always clear your floated element

    Author Comment

    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?
    LVL 30

    Expert Comment

    No that is not correct. Floating  an element will not make other elements floated


    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    How to run any project with ease

    Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
    - Combine task lists, docs, spreadsheets, and chat in one
    - View and edit from mobile/offline
    - Cut down on emails

    SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
    Password hashing is better than message digests or encryption, and you should be using it instead of message digests or encryption.  Find out why and how in this article, which supplements the original article on PHP Client Registration, Login, Logo…
    The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
    The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…

    737 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

    Need Help in Real-Time?

    Connect with top rated Experts

    19 Experts available now in Live!

    Get 1:1 Help Now