[Solved] Float help

[Roxon]

I’ve had this problem before, but what I used to solve it will no longer work. I have a left and a right element in a simple 2-column layout. The right one is set to float:right but if I set the other one to float:left the parent element’s background is removed! It is the strangest thing. Anyway, the real problem is that the right box floats to the right, but it below the left box. I could fix it with clear, but I can’t float the other box…any ideas?

[Chris Coyier]

you need to create a wrap for the main (left) section and your sidebar.

[Roxon]

I do, here’s my HTML.

This is a heading


Welcome to our website! This is some dummy text:







Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur congue diam vel sem pulvinar eleifend. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi et nulla in nibh faucibus lobortis eget vitae ipsum. Ut a tempus sapien. In sed lacinia erat. Pellentesque gravida accumsan neque, a varius dolor congue pretium.







Events


This is for upcoming events

And the CSS:

#body_main {

width: 950px;

text-align: left;

/*border:2px solid black;*/

}

#body_left {

font-family:verdana;

border:3px solid white;

background: #ffffff url(../images/content_bg.jpg) repeat-x left top;

width:650px;

padding:10px 9px 20px 9px;

overflow: hidden;

}

#body_right {

float:right;

margin-left:25px;

font-family:verdana;

border:3px solid white;

background: #ffffff url(../images/content_bg.jpg) repeat-x left top;

width:250px;

padding:10px 9px 20px 9px;

}

[jamygolden]

Add this to your CSS:

.clear{clear: both;}

And this div just before you close the parent div:

etc...



Events


This is for upcoming events

Or alternatively – To avoid extra markup, have a look at the clearfix method.

[Roxon]

As always, it is a really, really stupid mistake on my part. If you look at the above CSS I posted, the widths don’t compensate for the padding: therefore, the boxes didn’t fit side-by-side. *facepalm*

Solved, and thank you all! I did get some help out of this because I later used the clearfix method.

[Author]

Posts