CODEWITHSUNDEEP
htmlcsslayout
user544079
user544079

Reputation: 16639

div not floating side by side

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

Upvotes: 0

Views: 6839

Answers (6)

Ahmad Raza
Ahmad Raza

Reputation: 65

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>

Upvotes: 0

stealthyninja
stealthyninja

Reputation: 10371

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/

Upvotes: 1

mu is too short
mu is too short

Reputation: 434785

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/

Upvotes: 3

jackJoe
jackJoe

Reputation: 11148

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.

Upvotes: 4

Gabriele Petrioli
Gabriele Petrioli

Reputation: 196177

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.

Upvotes: 5

Brian Driscoll
Brian Driscoll

Reputation: 19635

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?

Upvotes: 1

Related Questions