CSS Positioning problem

I have always used tables and am trying to only use divs to build the layout, the problem is positioning just doesn't act how you would expect. The issue I'm having is the only way I could get this to look right was to use mainly absolute position, I assume float is what I really want. I want the div to expand to the content, currently I have to make each page the exact dimensions and doesn't work well with my ajax as the content expands the site stays the same.. So if I could get a little help making this work right I would really appreciate it.

I have to change the height in #center & #footer & #sitemap per page. Those are the divs I would prefer to use a percentage on.

Also once I added the #list & li I got a 10 or 15px margin at the top I cannot get rid of.

css file

@charset "utf-8";
/* CSS Document */
body {
background: url("../images/cp_des1_14.jpg");
margin:0;
text-align:center;
}
#head {
position:relative;
width:100%;
height:149px;
margin:0;
background: url("../images/cp_des1_01.gif");
}
#bgtop {
position:absolute;
width:100%;
height:149px;
margin:0, auto;
background: url("../images/cp_des1_01.gif");
}
#outer {
margin: 0px auto;
background-color:#fff;
width:865px;
height:500px;
}
#center {
background-color:#fff;
background: url("../images/cent_bg.gif") repeat-y top left;
position:absolute;
height:600px;
width:865px;
padding-right: 5px;
}
#footer {
position:absolute;
left:auto;
top:700px;
height:80px;
width:867px;
margin:0, auto;
background: url("../images/cent_bot.gif") no-repeat top left;
}
#logo {
position:absolute;
padding:20px;
text-align:left;
margin:0px auto;
width:180ex;
height:6ex;
left:3em;
display:block;
background: url("../images/logo.png") no-repeat top left;
}
h1#logo {
font-size:16px;
}
#logo span
{
position: absolute;
top: -999em;
}
#redbar {
position:absolute;
background: url("../images/red_bar.gif") no-repeat top left;
height:25px;
width:854px;
left:5px;
margin-bottom:25px;
}
#list {
position:relative;
top:110px;
left:355px;
height:30px;
width:500px;
font-size:18px;
}
#list li
{
display: inline;
list-style-type: none;
}
#list a { padding: 4px 12px; }

#list a:link, #list a:visited
{
border: 1px solid #135eff;
padding: 1px;
padding-left: 0.5em;
padding-right: 0.5em;
color: #135eff;
font-weight:bold;
text-decoration: none;
background-color:#7AF;
}

#list a:hover
{
border: 1px solid #fff;
color: #fff;
font-weight:bold;
text-decoration: none;
}
#sitemap
{
position:relative;
top:750px;
margin:0, auto;
}
#sitemap li
{
display: inline;
list-style-type: none;
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>SITE NAME</title>
<link href="css/index.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="bgtop"></div>
<div id="outer">
<div id="head">
<div id="logo"><span>SITE NAME</span>
</div>
<div id="list">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Jobs</a></li>
<li><a href="#">Training</a></li>
<li><a href="#">Forums</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
</div>
<div id="center">
<div id="redbar"></div><br /><br />
<p><?php @include(''); ?></p>
</div>
<div id="footer">
</div>
<div id="sitemap">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Jobs</a></li>
<li><a href="#">Training</a></li>
<li><a href="#">Forums</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
</div>
</body>
</html>

THANKS a lot
Mike

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
[w3.org...]
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>SITE NAME</title>
<link href="css/index.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="bgtop"></div>
<div id="outer">
<div id="head">
<p id="logo"><a href="/">SITE NAME</a></p>
<ul id="list">
<li><a href="#">Home</a></li>
<li><a href="#">Jobs</a></li>
<li><a href="#">Training</a></li>
<li><a href="#">Forums</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
<div id="center">
<div id="redbar"></div>

<p><?php @include(''); ?></p>
</div>
<div id="footer"></div>
<ul id="sitemap">
<li><a href="#">Home</a></li>
<li><a href="#">Jobs</a></li>
<li><a href="#">Training</a></li>
<li><a href="#">Forums</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
<div class="clear-div"></div>
</div>
</body>
</html>

@charset "utf-8";
/* CSS Document */
body {
background: url("../images/cp_des1_14.jpg");
margin:0;
/* text-align:center; This will center ALL TEXT */
}
#outer,#head,#footer,
#sitemap { margin:0; padding:0; width: 865px; }
#head,#center,#footer,#redbar,
#sitemap { float: left; overflow:hidden; }
/* min-height ignored by older IE */
#outer { background-color:#fff; margin: 0px auto; min-height:500px; }
#bgtop { width:100%; height:149px; background: url("../images/cp_des1_01.gif"); }
#head { height:149px; background: url("../images/cp_des1_01.gif"); }
#center {
background: #fff url("../images/cent_bg.gif") repeat-y top left;
min-height:600px;
/* With the padding it must be container width - padding *
width:860px;
padding-right: 5px;
}
#footer { height:80px; background: url("../images/cent_bot.gif") no-repeat top left; }
#logo,#logo a { width:180px; height:6px; display: block; outline:none; border:none; }
#logo { padding:20px; margin:0 auto; }
#logo a {
background: url("../images/logo.png") no-repeat top left;
/* is this why you did the negative margin? */
text-indent:-50000px; outline:none;
}
#redbar {
background: url("../images/red_bar.gif") no-repeat top left;
height:25px;
width:854px;
margin: 0 0 25px 5px;
}
#list { display: block; height:30px; width:500px; font-size:18px; }
#list li,
#sitmap li { display: inline; list-style-type: none; }
#list li { padding: 4px 12px; }
#list a:link, #list a:visited {
border: 1px solid #135eff;
padding: 1px;
padding-left: 0.5em;
padding-right: 0.5em;
color: #135eff;
font-weight:bold;
text-decoration: none;
background-color:#7AF;
}
#list a:hover {
border: 1px solid #fff;
color: #fff;
font-weight:bold;
text-decoration: none;
}
#sitemap { display: block; }
/* A clearing div becomes handy working with floats */
.clear-div { clear: both; }

CSS Positioning problem

xboxingman

xboxingman

rocknbil

xboxingman

xboxingman

rocknbil

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week