Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

css float and padding

Tags:

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.

like image 846
runeveryday Avatar asked Feb 16 '11 07:02

runeveryday


People also ask

Is float still used in CSS?

The float property still exists in CSS as it did when Internet Explorer was a young browser, and still works the same.

What is the use of float in CSS?

The float CSS property places an element on the left or right side of its container, allowing text and inline elements to wrap around it. The element is removed from the normal flow of the page, though still remaining a part of the flow (in contrast to absolute positioning).

What is float inherit in CSS?

left : floats the element to the left of its container. right : floats the element to the right of its container. inherit : the element inherits the float direction of its parent.

Can you float Center in CSS?

The CSS float property is used to set or return the horizontal alignment of elements. But this property allows an element to float only right or left side of the parent body with rest of the elements wrapped around it. There is no way to float center in CSS layout.


2 Answers

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.

like image 194
Kyle Avatar answered Oct 14 '22 18:10

Kyle


Put right floated div just before the float left div

like image 29
Mahima Avatar answered Oct 14 '22 18:10

Mahima