CODEWITHSUNDEEP
htmlcsscss-float
George Irimiciuc
George Irimiciuc

Reputation: 4633

Floated div not taking full width

Why do floated divs don't take full width? Aren't they still block elements?

Here is an example http://jsfiddle.net/GKjC8/

html

<div id="a">a</div>
<div id="b">b</div>

css

div {
    background-color:cyan;
}
#a {
    float:left;
}
#b {
    clear:left;
}

The a div looks like it's inline since it takes as much space as its content. Can someone explain?

Upvotes: 2

Views: 1693

Answers (2)

Dimitri Cabete Jorge
Dimitri Cabete Jorge

Reputation: 2083

That's because float elements behave like if a display: inline-block was applied to it. They expand to their content width.

As @Alek stated, if you want to set the width manually, you need to explicitly set it.

You can check this stackoverflow question for more informations

Upvotes: 1

Alex Char
Alex Char

Reputation: 33218

You have to set width:

#a {
   float: left;
   width: 100%;
}

“You should always set a width on floated items (except if applied directly to an image – which has implicit width). If no width is set, the results can be unpredictable.” Floatutorial: Float Basics

fiddle

Upvotes: 3

Related Questions