CODEWITHSUNDEEP
htmlcss
user2403162
user2403162

Reputation: 33

Float-left disabled padding

Two divs are side by side, one is floating left with a width of 25%, the other just has a width of 75%. But when padding is applied on the right hand div, the padding doesn't work properly.

Here is a JSfiddle example:

http://jsfiddle.net/88upt/

<div id="top">
</div>
<div id="middle">
</div>
<div id="bottom">
</div>

CSS

#top {
float: left;
background-color: green;
width: 25%;
height: 100%;
}
#middle {
background-color: blue;
padding: 30px;
min-height: 30%;
}
#bottom {
background-color: red;
min-height: 70%;
}

Can someone explain to me why this is happening?

Thanks

Upvotes: 2

Views: 972

Answers (3)

graficca.eu
graficca.eu

Reputation: 11

Add overflow = "auto" in the #middle.

#middle {
background-color: blue;
padding: 30px;
min-height: 30%;
overflow: auto;
}

In this way, you don't need to know the width of floating element.

Upvotes: 1

Knyri
Knyri

Reputation: 3028

Floating something is kind of like making it's position absolute. It will hover on top of it's neighboring containers. Add a margin-left equal to the width of the floated element to make the container the correct width.

http://jsfiddle.net/88upt/4/

#middle {
    background-color: blue;
    padding: 30px;
    min-height: 30%;
    margin-left:25%
}

EDIT Elaborating a bit more.

The floated element pushes the content of the sibling elements over. It will not push the left side of the content's element over. The padding is there it's just hidden by the floating element.

Upvotes: 2

Hanna
Hanna

Reputation: 10753

Width doesn't factor in padding.

enter image description here

Source: http://www.w3schools.com/css/css_boxmodel.asp

The width only applies to content, not padding, border, or margin.

You can find more information here.

Upvotes: -1

Related Questions