CODEWITHSUNDEEP
htmlcsscss-float
CodyBugstein
CodyBugstein

Reputation: 23322

Floating div covers the next div

I want to position a <div> on a line, and then another <div> afterward.

I set the first <div> to float left, and then put in the next one.

However, the first div is covering the second one. It's not positioning the second one after the first (as I expected) - it's starting it from the same place.

Here's the code (on JSFiddle: http://jsfiddle.net/LcrA9/)

<div id="container">
    <div id="one">
    </div>
    <div id="two">
    </div>
</div>

#container {
    width: 300px;
    height: 500px;
}
#one {
    width: 100px;
    height: 500px;
    float: left;
    background-color: green;    
}
#two {
    width: 200px;
    height: 500px;
    background-color: blue;
}

Upvotes: 0

Views: 158

Answers (7)

Ian Clark
Ian Clark

Reputation: 9347

Float the second div, or put a margin-left equal to the first div's width:

Floating JSFiddle:

#two {
    width: 200px;
    height: 500px;
    background-color: blue;
    float: left;
}

Margin-left JSFiddle

#two {
    width: 200px;
    height: 500px;
    background-color: blue;
    margin-left: 100px;
}

@PlantTheIdea's suggestion to use display: inline-block is sound. This question does have a purpose though: when you want the second div to consume the remaining space (and don't want to use display: table e.g.)

Here's an example of that too:

#container {
    height: 500px;
    clear: both;
}

#one {
    width: 100px;
    height: 500px;
    float: left;
    background-color: green;    
}

#two {
    height: 500px;
    background-color: blue;
    margin-left: 100px;
}

Upvotes: 2

Peleg Tabib
Peleg Tabib

Reputation: 44

Set The #two Div to float:left as well.

Upvotes: 0

Hendra Nucleo
Hendra Nucleo

Reputation: 591

Just add another "float:left" value on second div.

#one {
width: 100px;
height: 500px;
float: left;
background-color: green;

}

#two {
width: 200px;
height: 500px;
background-color: blue;
float:left;
margin-left:20px

}

DEMO

Upvotes: 0

Rodrigo Zuluaga
Rodrigo Zuluaga

Reputation: 497

Float left the next one too!!

<div id="container">
    <div id="one">
    </div>
    <div id="two">
    </div>
</div>

#container {
    width: 300px;
    height: 500px;
}
#one {
    width: 100px;
    height: 500px;
    float: left;
    background-color: green;    
}
#two {
    width: 200px;
    height: 500px;
    background-color: blue;
    float:left;
}

Upvotes: 0

Zafar
Zafar

Reputation: 3434

You need float:left on both divs

#one {
    width: 100px;
    height: 500px;
    float: left;
    background-color: green;    
}
#two {
    width: 200px;
    float:left;
    height: 500px;
    background-color: blue;
}

Fiddle

Upvotes: 1

GolezTrol
GolezTrol

Reputation: 116140

You could solve this by making the second div float as well:

#two {
    float: left;
    width: 200px;
    height: 500px;
    background-color: blue;
}

Upvotes: 0

PlantTheIdea
PlantTheIdea

Reputation: 16369

You need to ditch the floats, and discover display:inline-block; my friend!

Your HTML:

<div id="container">
    <div id="one">
    </div><div id="two">
    </div>
</div>

And your CSS:

#container {
    width: 300px;
    height: 500px;
}

#one,#two {
    display:inline-block;
    vertical-align:top;

    /* Old IE */
    *display:inline;
    *zoom:1;
}

#one {
    width: 100px;
    height: 500px;
    background-color: green;    
}

#two {
    width: 200px;
    height: 500px;
    background-color: blue;
}

Here is an updated jsFiddle.

The reason I eliminated the space between the two divs is because if there were any space, inline-block would put a 4px margin between them. The Old IE pieces are for IE7 and below.

Upvotes: 1

Related Questions