Display Two Divs on the Same Line

Conclusion: The key is to float both Divs, and to give the wrapper the 'height' property.

The correct method:

Note: Without the height element, the wrapper box would collapse

p {
    margin: 0;
}

#wrapper {
    background: pink;
    border: 1px solid black;
    height: 30px;
    width: 600px;
    }
    
#one {
    background: yellow;
    float: left;
    width: 250px;
    }
    
#two {
    background: orange;
    float: left;
    width: 300px;
    }

A Broken Version

Note: Without the first Div floating left, the second Div does not float up to the same line.

    
#three {
    background: yellow;
    /* float: left;  - without the float left */
    width: 250px;
    }
    
#four {
    background: orange;
    float: left;
    width: 300px;
    }

Another correct method - this time floating the second Div to the right:

    
#five {
    background: yellow;
    float: left;
    width: 250px;
    }
    
#six {
    background: orange;
    float: right;
    width: 300px;
    }

Another broken version - this time only the left Div is floated left, therefore the right Div wraps:

    
#seven {
    background: yellow;
    float: left;
    width: 250px;
    }
    
#eight {
    background: orange;
    width: 300px;
    }

Return to Test Directory Home Page