Floating Div's issue

I am new to the forums and web designing, and trying to learn quickly. Please excuse the confusing ID tags, and probably what is a pretty simple question to answer.

I am having a problem with a div float. I am trying to float left_content2_right to the right of left_content2_title, but it is floating right but staying below left_content2_ body. I tried using clears, but am willing to admit I didnt try the correct one.

HTML:
<div id="left_content2">
<div id="wrapper_leftcontent2_left">
<div id="left_content_2_title">CONTENT</div>
<div id="left_content2_body">CONTENT</div>
</div>
<div id="left_content2_right">CONTENT</div>
</div>

CSS:
#left_content2 {
background-color: #FFF;
width: 420px;
border-top-width: 10px;
border-top-style: solid;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
border-top-color: #e8e8e8;
float: left;
}
#wrapper_leftcontent2_left {
float: left;
height: auto;
width: auto;
}
#left_content_2_title {
width: 284px;
margin-top: 10px;
margin-left: 10px;
background-color: #FFF;
background-image: url(../images/scoreboard.gif);
height: 41px;
}
#left_content2_body {
width: 600px;
margin-top: 10px;
margin-left: 10px;
background-color: #FFF;
}
#left_content2_right {
background-color: #36C;
width: 40px;
margin-top: 10px;
margin-left: 10px;
float: right;
clear: both;
}


Appreciate any help. Also does creating lots of wrapper div's slow down the page loading time? I have a lot of div's set up similar to this on several sections of my page.

Are you trying to make a layout like http://bonrouge.com/2c-hf-fixed.php

There's a couple of issues here.

First, using clear:both on #left_content2_right is, itself, going to position that div so there is no floated content to either side of it, and prevent it sitting alongside you other div. So start by removing that property.

Then, you have #left_content2_body with width 600px, sitting within #left_content2_left, and in turn #left_content2 which is only 420px wide. So #left_content2_left is too wide for the container and there is no room for #left_content2_right to float next to it.

If you reduce the width of #left_content2_body then #left_content2_right will float where you want it to. The width needs to be no more than 360px (because then #left_content2_body has 360px width + 10px margin-left = 370px and #left_content2_right has width 40px + 10px margin-left = 50px, 370px +50px = 420px.

Also, you should assign a width to #wrapper_leftcontent2_left to ensure consistent display across different browsers.

There's a couple of issues here.

First, using clear:both on #left_content2_right is, itself, going to position that div so there is no floated content to either side of it, and prevent it sitting alongside you other div. So start by removing that property.

Then, you have #left_content2_body with width 600px, sitting within #left_content2_left, and in turn #left_content2 which is only 420px wide. So #left_content2_left is too wide for the container and there is no room for #left_content2_right to float next to it.

If you reduce the width of #left_content2_body then #left_content2_right will float where you want it to. The width needs to be no more than 360px (because then #left_content2_body has 360px width + 10px margin-left = 370px and #left_content2_right has width 40px + 10px margin-left = 50px, 370px +50px = 420px.

Also, you should assign a width to #wrapper_leftcontent2_left to ensure consistent display across different browsers.

Thanks for the reply. I was able to come to this solution when i studied the css file a bit more carefully. Now that it is corrected I am having an IE browser issue that I will post in a moment.

Really appreciate the replies guys.

EDIT: Problem solved
:):):) The problem was with a parent div not having a fixed width, that was screwing up the internet explorer display. Thanks again for the quick reply and solutions. This is a great forum. If anyone likes talking web design or being helpful over Instant Messenger, that would be cool. send me a pm.

Are you trying to make a layout like http://bonrouge.com/2c-hf-fixed.php


My layout is two columns at the top, and three columns at the bottom. So I used the div's to split the bottom left into two columns. Thanks for the link.