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.
The float property still exists in CSS as it did when Internet Explorer was a young browser, and still works the same.
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).
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.
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.
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.
Put right floated div just before the float left div
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With