PDA

Click to See Complete Forum and Search --> : Getting rid of absolute positioning in a 3-column layout...

shanest
07-19-2007, 11:00 AM
Right now I have a 3-column layout where the middle column is a 10-px wide graphic (not a spacer!). These columns are contained inside a container that displays left and right borders for the entire page (including content above the columns). However, since I used absolute positioning, the border on the container element does not extend down to the columns. How can I retain the document flow and the column layout?

CSS (note: #container, #nav, #tealcircle, #main):

body {
margin-top: 0px;
text-align: center;
font-family: verdana, sans-serif, arial;
font-size: small;
color: #000;
background-color: #FFF;
}

a {
font-weight: bold;
text-decoration: none;
color: #000;
}

#container {
width: 795px;
border-left: 1px solid #000;
border-right: 1px solid #000;
margin: 0 auto;
text-align: left;
}

#tophalf {
width: 795px;
background-color: #FFCC00;
}

#header {
background-image: url('header1.png');
width: 795px;
height: 100px;
}

#header ul {
float: right;
padding-right: 10px;
margin-top: 0px;
padding-top: 10px;
display: inline;
list-style-type: none;
}

#header li {
display: inline;
padding-left: 4px;
}

#header li a:hover {
color: #FF0000;
}

#search {
text-align: right;
padding-right: 10px;
padding-bottom: 5px;
}

#slogan {
font-style: italic;
padding-left: 10px;
padding-bottom: 5px;
}

#breadcrumb {
background-image: url('breadcrumbbg.png');
height: 30px;
padding-left: 185px;
}

#bcrumbtext {
padding-top: 12px;
}

#nav {
position: absolute;
width: 175px;
background-color: #00D0E9
}

ul#leftnav {
list-style: none;
margin-top: 0px;
margin-left: 0px;
padding-left: 10px;
}

ul#leftnav a {
font-weight: normal;
}

ul#leftnav li ul {
list-style: none;
padding-left: 20px;
display: none;
}

ul#leftnav, ul#leftnav li.active ul {
display: block;
}

ul#leftnav .hidden {
display:none;
}

ul#leftnav .visible {
display:block;
}

#tealcircle {
position: absolute;
background-image: url('navmaincurve.png');
background-repeat: no-repeat;
margin-left: 175px;
padding: 0px;
width: 10px;
}

#main {
position: absolute;
background-color: #FFF;
width: 600px;
margin-left: 185px;
padding-right: 9px;
}



XHTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>HyeCoup: Leaders in Project Management Training</title>
<link rel="stylesheet" type="text/css" href="main.css" />
<script src="menu.js" type="text/javascript"></script>
</head>
<body>
<div id="container">
<div id="tophalf">
<div id="header">
<ul>
<li><a href="#">Home</a></li>
<li>|</li>
<li><a href="#">Training</a></li>
<li>|</li>
<li><a href="#">Resources</a></li>
<li>|</li>
<li><a href="#">Products</a></li>
<li>|</li>
<li><a href="#">Alliances</a></li>
<li>|</li>
<li><a href="#">Support</a></li>
</ul>
</div>
<form action="#">
<div id="search">
<input type="text" size="30" name="query" />
<input type="submit" value="Search" />
</div>
</form>
<div id="slogan">
Slogan bar. Will create a database to display multiple random slogans.
</div>
<div id="breadcrumb">
<div id="bcrumbtext">
&raquo; Home &gt; Overview (breadcrumb bar--this color will also be that of the left navigation bar)
</div>
</div>
</div>
<div id="nav">
<ul id="leftnav">
<li><a href="#">Home</a></li>
<li><a href="#">Training</a>
<ul>
<li><a href="#">Sub-page 1</a></li>
<li><a href="#">Sub-page 2</a></li>
<li><a href="#">Sub-page 3</a></li>
<li><a href="#">Sub-page 4</a></li>
<li><a href="#">Sub-page 5</a></li>
</ul>
</li>
<li><a href="#">Resources</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Alliances</a></li>
<li><a href="#">Support</a></li>
</ul>
</div>
<div id="tealcircle">
&nbsp;
</div>
<div id="main">
argaethyjtuk
</div>
</div>
</body>
</html>
KDLA
07-19-2007, 01:02 PM
I suggest using the graphic as the background for the <div id="container">, having it repeat along the y-axis. That way, it will span the full length of your layout, no matter which column is longest.

KDLA
shanest
07-19-2007, 01:04 PM
Shouldn't the border have that same effect if not for the position: absolute?

I was under the impression that the problem stemmed from the fact that absolute positioning breaks the "document flow." Would an image work in spite of this?
KDLA
07-19-2007, 01:14 PM
Yes, you're right: absolute positioning does break the document flow -- but, I was under the impression that you were working on eliminating that.

If you're trying to achieve a simple three column layout, no absolute positioning is necessary. Take a look at this tutorial:
http://www.alistapart.com/articles/holygrail
shanest
07-19-2007, 01:36 PM
Trying and failing to eliminate absolute positioning...

I tried following that tutorial, but it failed miserably. I tried doing it with my overall container as their container and by adding a new div around just the three columns, but neither way worked...
shanest
07-19-2007, 01:37 PM
Updated code...:


body {
margin-top: 0px;
text-align: center;
font-family: verdana, sans-serif, arial;
font-size: small;
color: #000;
background-color: #FFF;
min-width: 795px;
}

a {
font-weight: bold;
text-decoration: none;
color: #000;
}

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

#tophalf {
width: 795px;
background-color: #FFCC00;
}

#header {
background-image: url('header1.png');
width: 795px;
height: 100px;
}

#header ul {
float: right;
padding-right: 10px;
margin-top: 0px;
padding-top: 10px;
display: inline;
list-style-type: none;
}

#header li {
display: inline;
padding-left: 4px;
}

#header li a:hover {
color: #FF0000;
}

#search {
text-align: right;
padding-right: 10px;
padding-bottom: 5px;
margin: 0px;
}

#slogan {
font-style: italic;
padding-left: 10px;
padding-bottom: 5px;
margin: 0px;
}

#breadcrumb {
background-image: url('breadcrumbbg.png');
height: 30px;
padding-left: 185px;
}

#bcrumbtext {
padding-top: 12px;
}

#threecols {
padding-left: 175px;
padding-right: 610px;
}

#threecols .column {
float: left;
position: relative;
}

#nav {
width: 175px;
right: 175px;
margin-left: -100%;
background-color: #00D0E9
}

ul#leftnav {
list-style: none;
margin-top: 0px;
margin-left: 0px;
padding-left: 10px;
}

ul#leftnav a {
font-weight: normal;
}

ul#leftnav li ul {
list-style: none;
margin-left: 0px;
}

ul#leftnav .hidden {
display:none;
}

ul#leftnav .visible {
display:block;
background-color: #96fbff;
border-bottom: 1px solid #FFF;
border-top: 1px solid #FFF;
border-left: 1px solid #FFF;
padding: 3px 0;
padding-left: 10px;
}

#tealcircle {
width: 100%;
background-image: url('navmaincurve.png');
background-repeat: no-repeat;
}

#main {
background-color: #FFF;
width: 610px;
margin-right: -610px;
}




XHTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>HyeCoup: Leaders in Project Management Training</title>
<link rel="stylesheet" type="text/css" href="main.css" />
<script src="menu.js" type="text/javascript"></script>
</head>
<body>
<div id="container">
<div id="tophalf">
<div id="header">
<ul>
<li><a href="#">Home</a></li>
<li>|</li>
<li><a href="#">Training</a></li>
<li>|</li>
<li><a href="#">Resources</a></li>
<li>|</li>
<li><a href="#">Products</a></li>
<li>|</li>
<li><a href="#">Alliances</a></li>
<li>|</li>
<li><a href="#">Support</a></li>
</ul>
</div>
<form action="#">
<div id="search">
<input type="text" size="30" name="query" />
<input type="submit" value="Search" />
</div>
</form>
<div id="slogan">
Slogan bar. Will create a database to display multiple random slogans.
</div>
<div id="breadcrumb">
<div id="bcrumbtext">
&raquo; Home &gt; Overview (breadcrumb bar--this color will also be that of the left navigation bar)
</div>
</div>
</div>
<div id="threecols">
<div id="nav" class="column">
<ul id="leftnav">
<li><a href="#">Home</a></li>
<li><a href="#">Training</a>
<ul>
<li><a href="#">Sub-page 1</a></li>
<li><a href="#">Sub-page 2</a></li>
<li><a href="#">Sub-page 3</a></li>
<li><a href="#">Sub-page 4</a></li>
<li><a href="#">Sub-page 5</a></li>
</ul>
</li>
<li><a href="#">Resources</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Alliances</a></li>
<li><a href="#">Support</a></li>
</ul>
</div>
<div id="tealcircle" class="column">
&nbsp;
</div>
<div id="main" class="column">
argaethyjtuk
</div>
</div>
</div>
</body>
</html>