2

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

user2403162
  • 33
  • 1
  • 1
  • 3
  • Looks fine to me: http://jsfiddle.net/88upt/1/ – karthikr May 20 '13 at 20:41
  • It has padding applied on the top, right and bottom, just not on the left? – user2403162 May 20 '13 at 20:45
  • It is applying properly, just that it is rendering from the left most. Check this update: http://jsfiddle.net/88upt/6/ you will know what i m talking about – karthikr May 20 '13 at 20:47
  • Making the green box semi-transparent shows why this happens: http://jsfiddle.net/88upt/7/ You'll notice the blue and red boxes actually have way more than 30px padding on the left, it's just hidden by the floating block. – James Montagne May 20 '13 at 20:49

3 Answers3

2

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.

Knyri
  • 2,968
  • 1
  • 17
  • 24
1

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.

graficca.eu
  • 11
  • 1
-1

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.

Community
  • 1
  • 1
Hanna
  • 10,315
  • 11
  • 56
  • 89