Understanding Floats and Positioning

[fatman]

Hi everyone, I'm fairly new to CSS and I get confused easily with floats, positioning and what should be used.

I've built my first template which I'm happy with however I'm forced to wrap two divs in my #content so that it displays properly. If I don't do this, the content_bottom and footer div show up near the nav bar.

Here's the HTML without wrapping the two divs in #content

<div id="container">
<div id="header"></div>
<div id="navigation">
<ul id="nav">
<li id="Left"></li>
<li id="Service" title="IT Services"><a href="itservices.php"><span>IT Services</span></a></li>
<li id="Ecommerce" title="Ecommerce"><a href="ecommerce.php"><span>Ecommerce</span></a></li>
<li id="Web" title="Web"><a href="web.php"><span>Web Services</span></a></li>
<li id="Security" title="Security"><a href="security.php"><span>Security</span></a></li>
<li id="Storage" title="Storage"><a href="backup.php"><span>Storage</span></a></li>
<li id="Right"></li>
</ul>
</div>
<div id="logo"></div>
<div id="content">
<h1>text</h1>
<p>text</p>
<p>text</p>
</div>
<div id="content_bottom"></div>
<div id="footer"></div>
</div>

CSS being used:

body {
text-align: center;
background: url("../images/background.jpg") repeat-x;
padding: 0;
margin:0;
}

#container{
width: 1000px;
padding: 0px;
margin: 0px auto;
text-align: left;
}

#container #header {
margin: 0px 0px 0px 0px;
height:92px;
width:1000px;
background: url("../images/logo.jpg") no-repeat;
}

#navigation{
position: absolute;
top: 92px;
width: 1000px;
height: 50px;
margin: 0;
padding: 0;
}

#navigation ul#nav {
width: 1000px;
height: 50px;
overflow: hidden;
padding: 0;
margin: 0;
list-style: none;
background: url("../images/links.jpg");
}

#navigation ul#nav li{
float: left;
padding: 0;
margin: 0;
}

#navigation ul#nav li a span{
margin-left: -5000px;
}

#navigation ul#nav li a {
display: block;
width: 150px;
height: 50px;
}

#navigation ul#nav li#Left {
background: url("../images/link_left.jpg");
width: 40px;
height: 50px;
margin: 0 0 0 85px;
padding: 0px;
}

#navigation ul#nav li#Right {
background: url("../images/link_right.jpg");
width: 40px;
height: 50px;
margin: 0;
padding: 0px;
}

#navigation ul#nav li#Service {
display: block;
width: 150px;
height: 50px;
background-image: url("../images/tech.jpg");
background-repeat: no-repeat;
}

#navigation ul#nav li#Service a {
display: block;
width: 150px;
height: 50px;
background-image: url("../images/tech.jpg");
background-repeat: no-repeat;
}

#navigation ul#nav li#Service a:hover { background: url("../images/tech_roll.jpg

#navigation ul#nav li#Ecommerce {
display: block;
width: 150px;
height: 50px;
background-image: url("../images/ecommerce.jpg");
background-repeat: no-repeat;
}

#navigation ul#nav li#Ecommerce a {
display: block;
width: 150px;
height: 50px;
background-image: url("../images/ecommerce.jpg");
background-repeat: no-repeat;
}
#navigation ul#nav li#Ecommerce a:hover { background: url("../images/ecommerce_r

#navigation ul#nav li#Web {
display: block;
width: 150px;
height: 50px;
background-image: url("../images/web.jpg");
background-repeat: no-repeat;
}

#navigation ul#nav li#Web a {
display: block;
width: 150px;
height: 50px;
background-image: url("../images/web.jpg");
background-repeat: no-repeat;
}

#navigation ul#nav li#Web a:hover { background: url("../images/web_roll.jpg");}

#navigation ul#nav li#Security {
display: block;
width: 150px;
height: 50px;
background-image: url("../images/security.jpg");
background-repeat: no-repeat;
}

#navigation ul#nav li#Security a {
display: block;
width: 150px;
height: 50px;
background-image: url("../images/security.jpg");
background-repeat: no-repeat;
}

#navigation ul#nav li#Security a:hover { background: url("../images/security_roll.jpg");}

#navigation ul#nav li#Storage {
display: block;
width: 150px;
height: 50px;
background-image: url("../images/storage.jpg");
background-repeat: no-repeat;
}

#navigation ul#nav li#Storage a {
display: block;
width: 150px;
height: 50px;
background-image: url("../images/storage.jpg");
background-repeat: no-repeat;
}

#navigation ul#nav li#Storage a:hover { background: url("../images/storage_roll.jpg");}

#container .cls{
clear: both;
}
#container #logo{
position: absolute;
top: 142px;
padding: 0px;
height: 240px;
width: 1000px;
background: url("../images/slogan.jpg") no-repeat;
}

#container #content{
position: absolute;
top: 382px;
margin: 0px;
width: 1000px;
padding: 0px;
background: url("../images/content.jpg") repeat-y;
text-align: left;
}

#container #content_bottom {
height: 44px;
width:1000px;
background: url("../images/content_bottom.jpg") no-repeat;
}

#container #footer{
width:1000px;
height: 101px;
background: url("../images/footer.jpg") no-repeat;
}

To fix the issue, I need to have it the following way:

<div id="content">
<h1>text</h1>
<p>text</p>
<p>text</p>
</div>
<div id="content_bottom"></div>
<div id="footer"></div>
</div>

If I don't wrap my divs, the content-bottom and footer do not appear at the correct location. They appear around the nav bar. I had a similar issue trying to insert my slogan (logo div) but figured out that it was related to floating my nav bar. To fix the logo issue, I added the clear: both; command to the last li in the navagation.

Did I screw myself by using position: absolute with a dynamic content page and floats? Am I going the wrong way with this?

Any help would be much appreciated,

Fatman

[BlaineSch]

I'm a tad bit confused about what your trying to accomplish, I may just be stupid though.

The right now it's just all in order, the logo, content, bottom content, and footer, right? What do you want it to appear as?

[fatman]

Sorry, maybe i didn't make myself clear.

I want it to display the following:
HEADER
NAV
Slogan
Content
Content-Bottom
Footer

Using the code in my previous post and calling it through PHP works fine when I have the footer and bottom-content div inside Content.

For example, using the following works:

<div id="Content">
<div id="Content-Bottom"></div>
<div id="Footer"></div>
</div>

If I don't do the following and use this:

<div id="Content"></div>
<div id="Content-Bottom"></div>
<div id="Footer"></div>

my content-bottom and footer div do not show up below Content but hovers on ontop of my navigation div.

Further research found that using floats breaks the work flow of the design. The solution is to use the clear: both command which forces the following div/text to go back to following the flow.

I've tried adding to the content div but it doesn't seem to be working. The only solution is to put the content-bottom and footer div inside content. This doesn't seem right and I was just trying to find out why. Since I'm new to this, I was hoping someone could provide some insight as to whether or not I'm programing properly. I put my html code inside php and call it through an include command.

Anyhow, I hope this helps.

Fatman