css float and padding

Question

This is the HTML layout:

        <div class="wrap">
           <div id="container">
               <div id="left">...</div> 
               <div id="right">...</div> 
            </div>
        </div>

I used the float: left to the left div, and float: right to the right div. Then, I used the padding-top: 10px to the container. Why doesn't it work? thank you.

This is my first style:

.wrap {
    float: left;
    width: 1000px
}

#container{
    background-color: #FFFFFF;
    padding: 10px 10px 0;
    width: 980px;
    float: left;
}

#left {
    float: left; 
    width: 670px;
}

#right {
    float: right;
    width: 300px;
}

Example here.

Can you create an example using a site like http://jsfiddle.net? Also, are the closing `` tags typos or in your code? Because not-closing your div tags properly could cause your issue. — nybbler, Feb 16 '11 at 07:34

Kyle · Accepted Answer · 2015-11-12T08:13:36.717

31

When you float an element, it's effectively taking it out of the document flow, so adding padding to its parent won't have an effect on it. You could use margin-top: 10px; on both of your inner divs.

edited Nov 12 '15 at 08:13

answered Feb 16 '11 at 07:36

Kyle

65,599
28
144
152

yeah,you're right, but when i use the float:left to the container div, the padding can work. and i used a width to it, then a width to the left div and right div. under IE7,firefox.they all show ok.but under IE6 the right div shows unnormal,which under the left part. why? how to alter it. thank you. – runeveryday Feb 16 '11 at 07:43
Can you post your CSS code too? If you're using more widths and floats that we cannot see, then we can help find a proper solution :) – Kyle Feb 16 '11 at 07:44
It appears to be doing what you asked in the example I made. http://jsfiddle.net/Kyle_Sevenoaks/86F2A/1/ what's "not working?" – Kyle Feb 16 '11 at 08:07

score 1 · Answer 2 · answered Feb 16 '11 at 08:11

1

Put right floated div just before the float left div

answered Feb 16 '11 at 08:11

Mahima

489
1
5
17

score 1 · Answer 3 · answered Nov 23 '21 at 08:48

1

Instead of using float, use flex and justify the contents to be space-between

 #container{
  background-color: #FFFFFF;
  padding: 10px 10px 0;
  width: 980px;
  display: flex;
  justify-contents: space-between;
 }

answered Nov 23 '21 at 08:48

Golden Ogbeka

11
2

css float and padding

3 Answers3

Linked