CODEWITHSUNDEEP
htmlcss
OzrenTkalcecKrznaric
OzrenTkalcecKrznaric

Reputation: 5646

Missing margin between floating and nonfloating divs

I found that when I mix floated and nonfloated divs, margin of unfloated div is missing.

HTML

<div class="d0 d1">
    Left
</div>
<div class="d0 d2">
    Right
</div>
<div class="d0 d3">
    Center
</div>

CSS

.d0 {
    height: 100px;
    border: 1px solid #333;
}

.d1 {
    float: left;
    width: 100px;
}

.d2 {
    float: right;
    width: 100px;
}

.d3 {
    overflow: hidden;
    width: auto;
    margin: 5px;
}

See this fiddle (5px margin on center div is missing)

http://jsfiddle.net/ozrentk/f5VFc/2/

However, if I add margin to floating elements, then it's really there. Does someone know why is this happening?

EDIT I updated the fiddle, it was a bit confusing To understand the problem, look at the margin that should be BETWEEN Center and Left div. Or Center and Right. There is none.

Upvotes: 0

Views: 605

Answers (1)

Joel
Joel

Reputation: 5450

The problem you are running into is that a non floated element will ignore floated elements within the document flow. The margin is being applied, but since the non floated div does not recognize the floated one, its is relative to the edge of the page and not the floated div. You can read more about it here: http://spyrestudios.com/css-in-depth-floats-positions/

Upvotes: 1

Related Questions