div not floating side by side

Question

<div id="content">
    <div id="outer">
        <div id="header">Transport</div>
        <div id="image">
            <img src="../images/img1.jpg" style="width:300px;height:300px"/>
        </div>
        <div id="right_content">large amount of text</div>
    </div>
</div>

For the above the css used is:

#content {
    width: 100%;
    min-height: 600px;
    overflow: hidden;
    border: 1px solid;
    padding: 0;
    margin: 0;
}

#outer {
    border: 1px solid;
    float: left;
    overflow: hidden;
    width: 100%;
    min-height: 200px;
}

#header {
    border: 1px solid;
    width: 100%;
    height: 20px;
    background-color: #006A4D;
    color: #ffffff;
    padding: 10px;
    font: normal 14px Helvetica, Arial, sans-serif;
    line-height: 18px;
    clear: both;
    overflow: auto;
}

#right_content {
    border: 1px solid;
    overflow: hidden;
    min-height: 300px;
    padding: 10px;
    float: left;
    background-color: orange;
    font: normal 12px Helvetica, Arial, sans-serif;
    line-height: 18px;
}

#image {
    border: 1px solid;
    min-width: 300px;
    min-height: 300px;
    padding: 10px;
    float: left;
    overflow: hidden;
}

Both the inner divs are float:left . But the output comes as one div below the other. How can I get them to appear side by side?

Answer 1

Works fine for me at http://jsfiddle.net/gaby/zv4zG/

The thing to keep in mind is that if you do not specify widths for the floated elements, and they grow in size in order to accommodate their contents, they may reach a size ( when added ) that exceeds their container width. At that point they will break and one will go below the other.

So, you have to ensure that their added widths ( and horizontal paddings and margins ) will never exceed their containers width.

Answer 2

the outer div has a 100% width, witch tells the browser to ocupy all the available width, that's why the second div drops beneath.

The solution is simple, make sure both divs have enough width to be able to be side by side.

Answer 3

You don't need to float the #right_content , just add a left margin wide enough to accommodate the image and drop the overflow :

#right_content{
    border: 1px solid;
    min-height: 300px;
    padding: 10px;
    margin-left: 322px;
    background-color: orange;
    font: normal 12px Helvetica, Arial, sans-serif; 
    line-height: 18px;
}

Live example: http://jsfiddle.net/ambiguous/8m3LS/

Answer 4

DIVs are block-level elements, meaning that they will stack vertically by default. In order to make them appear side-by-side, you will also need to set display: inline; in your CSS.

UPDATE

I just created this jsfiddle and it looks like your layout is fine... not sure what the issue is. Could it be browser specific?

Answer 5

I gave #image and #outer a width and #right_content a negative margin to account for the #image 's space.

jsFiddle: http://jsfiddle.net/stealthyninja/Hn2Et/

Answer 6

As we give width to one of the div, it leaves the extra space for next div, but make sure the width of both divs do not exceeds the browser's width, otherwise the second div will move below the first div. this css worked for me:

 #left{ display:inline; width:50%; float:left; } #right{ float:left; } 

 <div id="left"> left div </div> <div id="right"> right div </div>