Can't figure out why my div wont float rigth and top. Should be simple, but

HTML & CSS
1

I just downloaded notepad++ so I just want to review and hand code a page and then keep working on it.

should be super simple. but one of my div, floated right and w/in its own content box is not floating right & top.

Could someone please look at my code & tell me what I am doing wrong please?

here is the html


<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" style="text/css" href="file1CSS.css">
</head>
<body>
<div id="wrapper">
<div id="nav">  </div> <!--nav-->

<div id="contentBox">

<div id="text1">
<p class="pr1">
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed augue nibh, bibendum in euismod vel, auctor quis lectus. Aliquam vitae urna sem, et imperdiet erat. Integer sem elit, gravida at posuere a, pellentesque id tortor. iverra enim. Sed fermentum faucibus massa, at tincidunt sapien tincidunt quis.
</p>
</div> <!--text1-->

<div id="text2">
<p class="pr1">
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed augue nibh, bibendum in euismod vel, auctor quis lectus. Aliquam vitae urna sem, et imperdiet erat.
</p>
</div> <!--text2-->

<div id="text3">
<p>
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed augue nibh, bibendum in euismod vel, auctor quis lectus. Aliquam vitae urna sem, et imperdiet erat. Integer sem elit, gravida at posuere a, pellentesque id tortor. Nullam non velit ut lacus hendrerit facilisis id eget neque. Nunc tempus semper enim, pellentesque rutrum velit placerat et. Integer luctus euismod nibh, nec ultrices metus varius et. Vivamus risus ipsum, dapibus vitae placerat a, varius non tellus. Vestibulum porta venenatis lacus, at
</p>
</div> <!--text3-->


<div id="clear"> </div> <!--clear-->
</div> <!--contentBox-->

<div id="clear"> </div> <!--clear-->
<div id="footer">footer content whatever @ 2012</div>
</div> <!--wrapper-->
</body>
</html>

and here is the css


body{
background-color:#338585;


}

#wrapper{
background-color:#4D9494;
margin: 0px auto;
height: 900;
width:900;
border: solid 3px #001F1F;


}
#clear {
clear:both;
}
#nav{
color:#fff;
background-color:#003333;
margin: 0 auto;
height: 50px;
width:900;
border: solid 3px #001F1F;

}


#contentBox{
width:750px;
margin: 10px auto;
padding:5px 5px;
background-color:#339933;
border: solid 3px #001F1F;
}
.pr1{
margin:0px 5px;
color: #333300;
}
#text1{
padding: 10px 20px;
margin: 10px 0px;
float: left;
background-color:#99C2C2;
height: auto;
width:500px;
border: solid 2px #001F1F;

}
#text2{
padding: 10px 20px;
float: left;
background-color:#99C2C2;
height: auto;
width:500px;
border: solid 2px #001F1F;
}

#text3{
padding: 10px 20px;
float: right;
background-color:#99C2C2;
height: auto;
width:150px;
border: solid 3px #001F1F;
}

#footer{
color:#fff;
background-color:#003333;
margin: 0 auto;
height: 50px;
width:900;
border: solid 3px #001F1F;
}

thank you

2

Hi there,

to solve this (assuming I have understood your problem correctly), just change the order of the divs within the HTML.
So, you would have:

<div id="contentBox">
  <div id="text3">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed augue nibh, bibendum in euismod vel, auctor quis lectus. Aliquam vitae urna sem, et imperdiet erat. Integer sem elit, gravida at posuere a, pellentesque id tortor. Nullam non velit ut lacus hendrerit facilisis id eget neque. Nunc tempus semper enim, pellentesque rutrum velit placerat et. Integer luctus euismod nibh, nec ultrices metus varius et. Vivamus risus ipsum, dapibus vitae placerat a, varius non tellus. Vestibulum porta venenatis lacus, at </p>
  </div> <!--text3-->
  
  <div id="text1">
    <p class="pr1">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed augue nibh, bibendum in euismod vel, auctor quis lectus. Aliquam vitae urna sem, et imperdiet erat. Integer sem elit, gravida at posuere a, pellentesque id tortor. Nullam non velit ut lacus hendrerit facilisis id eget neque. Nunc tempus semper enim, pellentesque rutrum velit placerat et. Integer luctus euismod nibh, nec ultrices metus varius et. Vivamus risus ipsum, dapibus vitae placerat a, varius non tellus. Vestibulum porta venenatis lacus, at 
    </p>
  </div> <!--text1-->
  
  <div id="text2">
    <p class="pr1">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed augue nibh, bibendum in euismod vel, auctor quis lectus. Aliquam vitae urna sem, et imperdiet erat. Integer sem elit, gravida at posuere a, pellentesque id tortor. Nullam non velit ut lacus hendrerit facilisis id eget neque. Nunc tempus semper enim, pellentesque rutrum velit placerat et. Integer luctus euismod nibh, nec ultrices metus varius et. Vivamus risus ipsum, dapibus vitae placerat a, varius non tellus. Vestibulum porta venenatis lacus, at 
    </p>
  </div> <!--text2-->
  <div id="clear"></div> <!--clear-->
</div> <!--contentBox-->

And then just tweak the CSS slightly:

#text3{
  margin-top:10px;
  padding: 10px 20px;
  float: right;
  background-color:#99C2C2;
  height: auto;
  width:150px;
  border: solid 3px #001F1F;
}

Does that work?

3

thank you!
It did work. But can you explain why it had to be reversed? I didn’t think that would matter, the float was supposed to take care of that?

4

Sure thing.
Cuz divs are block level elements (as opposed to inline ones).
You display div#text1 on the page. All good.
Then you place div#text2 on the page. By default this will always appear under div#text1.
Then you float div#text3 to the right. div#text3 will always float to the right of div#text2, as div#text1 has claimed the top “row” for itself.
You could also have arranged the divs like this:

<div id="text1">
<p class="pr1">Lorem ipsum </p>
</div>

<div id="text3">
<p>Lorem ipsum</p>
</div> <!--text3-->

<div id="text2">
<p class="pr1">
 Lorem ipsum </p>
</div> <!--text2-->

The other way just made more sense to me.

5

Fantastic, thank you for the great clear explanation.
Just one quick last question. Why did not setting a width for div one take care of that?
I thought if I sized to leave enough space on that side that would do it.
thank you
D

6

I see your logic, but it doesn’t work like that, I’m afraid.
As I mentioned, as soon as you have another block level element below the fist div, any floats will only float to the right of the second block level element, not the first.
Floats are confusing at the best of times and not an ideal method for positioning elements (I’m not suggesting you use something else, it’s just that floats are tricky and annoying).
If you want to find out more on the subject, I recommend Chris Coyier’s excellent article: http://css-tricks.com/all-about-floats/

HTH

7

Thanks Pullo, for the explanation and the link. will go check that out as well.