- This topic is empty.
-
AuthorPosts
-
October 21, 2010 at 10:08 pm #28343RoxonMember
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 tofloat: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?October 21, 2010 at 11:10 pm #77728Chris CoyierKeymasteryou need to create a wrap for the main (left) section and your sidebar.
October 21, 2010 at 11:25 pm #77729RoxonMemberI 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;
}
October 22, 2010 at 12:11 am #77716jamygoldenMemberAdd 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.
October 22, 2010 at 10:50 am #77703RoxonMemberAs 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.
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.