Floating issues [Archive] - CodingForums.com

IMPtheIMP

08-22-2010, 11:05 AM

Hey

I have reached the point of desperation and I am on the verge of losing my sanity over this. I'm new to the coding forum business so I appoligize if I'm not doing this correctly or effeciently.

Ok here goes:

Basically I'm making a basic XHTML 1.0 transitional site in Dreamweaver CS4.
I have a <div>#container <div>#striped <div>#content
and within these are 2 other divs.
In the following code you can see that #box1 and #box2 are not floating.

In this picture you can see all is well:
http://i660.photobucket.com/albums/uu327/IMP-the-IMP/Capture1.jpg

This is the code

* {margin:0px; padding:0px;}

body {
font-size:67%;
font-family:Verdana, Geneva, sans-serif;
background-color:#000;
color:#FC3;
}

h1 {
font-size:1.7em;
color:#FF6;
text-decoration:none;
}

h2 {
font-size:1.3em;
margin-bottom:4px;
}

#container {width:900px; margin:auto;}

#header {
height:310px;
background-image:url(images/Header_02.jpg)
}

#nav {
width:800px;
height:60px;
margin:auto;
margin-bottom:10px;
position:relative;
}

#nav ul {
width:800px;
}

#nav li {
list-style-type:none;
}

#nav li a {
display:block;
width:190px;
height:60px;
text-decoration:none;
text-indent:-999999px;
}

#nav #home {
top:0px;
left:0px;
width:130px;
height:60px;
background:url(images/NavHomeUp_04.jpg) no-repeat 0 0;
float:left;
}

#nav #about {
top:0px;
left:130px;
width:151px;
height:60px;
background:url(images/NavAboutUp_05.jpg) no-repeat 0 0;
float:left;
}

#nav #gallery {
top:0px;
left:260px;
width:151px;
height:60px;
background:url(images/NavGalleryUp_06.jpg) no-repeat 0 0;
float:left;
}

#nav #forum {
top:0px;
left:390px;
width:175px;
height:60px;
background:url(images/NavForumUp_07.jpg) no-repeat 0 0;
float:left;
}

#nav #links {
top:0px;
left:600px;
width:190px;
height:60px;
background:url(images/NavLinksUp_08.jpg) no-repeat 0 0;
float:left;
}

#nav #home a:hover {
background:url(images/NavHomeOver_04.jpg);
}

#nav #about a:hover {
background:url(images/NavAboutOver_05.jpg);
}

#nav #gallery a:hover {
background:url(images/NavGalleryOver_06.jpg);
}

#nav #forum a:hover {
background:url(images/NavForumOver_07.jpg);
}

#nav #links a:hover {
background:url(images/NavLinksOver_08.jpg);
}

#striped {background:url(stripes2.jpg); width:750px; margin:auto;}

#content {
width:520px;
margin:auto;
border-left:5px solid #FF0;
border-right:5px solid #FF0;
}

#conHeader {
margin:20px 0 20px 0;
text-align:center;
}

#box1 {
width:200px;
float:none;
border:#FC3 dotted 3px;
}

#box2 {
width:250px;
float:none;
margin: 0px 30px 0 0px;
text-align:inherit;
}

/*#footerSpacer {
height:10px;
} */
#footer {
clear:both;
width:750px;
height:60px;
margin-top:15px;
background:#666;
margin-bottom:5px;
margin:auto;
}

</style>
</head>

<body>
<div id="container">
<div id="header"></div>
<div id="nav">
<ul id="nav">
<li id="home"><a href="index.html">home</a></li>
<li id="about"><a href="index.html">about</a></li>
<li id="gallery"><a href="index.html">gallery</a></li>
<li id="forum"><a href="index.html">forum</a></li>
<li id="links"><a href="index.html">links</a></li>
</ul>
</div>
<div id="striped">
<div id="content">

<div id="conHeader">
<h1><img src="images/headerL.png" width="340" height="54" /></h1>
</div>

<div id="box2">
<h1>BFF Rape</h1>
<h2>22/08/20</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse accumsan congue nulla a dapibus. Aliquam enim elit, accumsan ac faucibus id, varius non arcu. Aenean et massa tortor. Aliquam nec ante velit, eget lobortis nunc. Maecenas lacinia auctor mi interdum dapibus. Proin condimentum nibh in urna pellentesque egestas. Mauris eget arcu quis erat volutpat ullamcorper. Aliquam nec ante velit, eget lobortis nunc. Maecenas lacinia auctor mi interdum dapibus. Proin condimentum nibh in urna pellentesque egestas. M </p>
</div>

<div id="box1"><img src="images/PracIMG.jpg" width="200" height="170" /></div>
</div>

</div>
</div>

<div id="footerSpacer"></div>
<div id="footer"></div>
</div>
</body>
</html>

But the moment I float a div for instance; #box1, this happens:
http://i660.photobucket.com/albums/uu327/IMP-the-IMP/Capture2.jpg

This is the same thing that happens when I float any/each of the #box divs either left or right, more or less.
The moment I float one of them, it falls below all the divs in which it is contained. I asked my teachers and they were stoked, they couldn't figure it out.

Please, any suggestions or tips would be greatly appreciated.
IMP