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.

Solution 1

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.

Solution 2

Put right floated div just before the float left div

Solution 3

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;
 }

Comments

[teuneboon]

You sure that the closing tag is </left>?

[nybbler]

Can you create an example using a site like jsfiddle.net? Also, are the closing </left> tags typos or in your code? Because not-closing your div tags properly could cause your issue.

[runeveryday]

i am sorry, i made a typo mistake.

[runeveryday]

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.

[Kyle]

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]

It appears to be doing what you asked in the example I made. jsfiddle.net/Kyle_Sevenoaks/86F2A/1 what's "not working?"