CSS Layout Help - Absolute vs. Relative Position

**matches** · Dec 27, 2006 17:31

I am having trouble understanding how to align my divs parallel to each other. If I use absolute positioning then I can get it but it won't work in all screen resolutions. If I use relative then the two divs you will see are staggered. Here is a link to the page and below is the code. Thanks for any help.

http://www.servicewhale.com/template.htm

Code:

#body
    {
    width: 790px;
    }

#right_div
    {
    position: relative;
    width: 230px;
    top: 30px;
    left: 550px;
    padding: 10px;
    border-style: solid;
    border-color: #000000;
	background-color: #cccccc;
    border-width: 1px;
    /*border-right: 2px dotted #dddddd;*/
    }

#center_div
    {
    position: relative;
    width: 50%;
    }
    
#left_div
    {
    position: relative;
    width: 230px;
    height: 200px;
    top: 30px;
    left: 0px;
    padding: 10px;
    border-style: solid;
    border-color: #000000;
	background-color: #cccccc;
    border-width: 1px;
    /*border-right: 2px dotted #dddddd;*/
    }

HTML Code:

<div id="container">
  	 <div id="header">
  	 </div>
	 <!-- header -->
  	 <div id="navigation">
	 	  <ul>
		  <li><a href="#">Contact</a></li>
		  <li><a href="#">Solututions</a></li>
		  <li><a href="#">Partners</a></li>
		  <li><a href="#">Services</a></li>
		  <li><a href="#">About</a></li>
		  </ul>
  	 </div>
	 <!-- navigation -->
	 <div id="body">
    	 <div id="left_div">
       	 </div>
  	 	 <!-- left_div -->
    	 <div id="right_div">
      	   Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test 
       	 </div>
  	 	 <!-- right_div -->
    	 <div id="footer">
    	 </div>
  	 	 <!-- footer -->
     </div>
	 <!-- body -->		 
  </div>
  <!-- container -->

**markbrown4** · Dec 27, 2006 17:53

Hello,

I think you're after something like this

Code:

<!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=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
body {
	background: #333;
	margin: 0; 
	padding: 0;
}
#container {
	width: 790px;
	background: #CCC;
	margin: 0 auto;
}

#right_div {
    padding: 10px;
	background-color: #CCC;
    border-width: 1px solid #000;
	margin-left: 250px;
    }
#left_div {
    width: 230px;
    height: 200px;
    padding: 10px;
    border: 1px solid #000;
	background: #CCC;
	float: left;
}
#footer {
	clear: left;
}
</style>
</head>

<body>
<div id="container">
  	 <div id="header">
  	 </div>
	 <!-- header -->
  	 <div id="navigation">
	 	  <ul>
		  <li><a href="#">Contact</a></li>
		  <li><a href="#">Solututions</a></li>
		  <li><a href="#">Partners</a></li>
		  <li><a href="#">Services</a></li>
		  <li><a href="#">About</a></li>
		  </ul>
  	 </div>
	 <!-- navigation -->
    	 <div id="left_div">
       	 </div>
  	 	 <!-- left_div -->
    	 <div id="right_div">
      	   <p>Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test</p>
       	 </div>
  	 	 <!-- right_div -->
    	 <div id="footer">
    	 </div>
  	 	 <!-- footer -->
  </div>
  <!-- container -->
</body>
</html>

You seem to have a misunderstanding about relative positioning.
I only really use position: relative; when a child element needs to be absolutely positioned within it.
Don't use body as an id, it's too confusing

**matches** · Dec 27, 2006 20:45

I obviously don't get this. Why is the column on the right not aligned to the top?

The last solution worked with the two columns. Now that I have three I have the original problem but can't seem to figure it out

Thanks again for any help

Code:

body { 
	font: 8pt/16pt arial; 
	color: #555753; 
	background: #333333; 
	margin: 0px;
	}
    
ul {
	float:right;
	width:100%;
	padding:0;
	margin:0;
	list-style-type:none;
	}
    
a {
    float: right;
	width: 7.5em;
	font-family: arial;
	text-decoration: none;
	color: white;
	background-color: #cccccc;
	padding: 0em 0.3em;
	}
    
a:hover {
	background-color:#dddddd;
    color: #666666;
	}
    
li {
	display:inline;
	}
    
a:link { 
	font-weight: bold; 
	text-decoration: none; 
	color: #444444;
	}
    
a:visited { 
	font-weight: bold; 
	text-decoration: none; 
	color: #666666;
	}
    

    
/* specific divs */

#container { 
	width: 790px;
	height: 100%;
	margin: 0px auto;
	text-align: left;
	padding: 0px;
    border-style: solid;
    border-color: #000000;
	background-color: #cccccc;
    border-width: 1px;
	}
    
#header { 
	width: 790px;
    height: 100px;
    margin: 0px;
    padding: 0px;
    background-color: #000000;
	background-image: url('images/header.jpg');
	}
    
#navigation {
    float: left;
    width: 790px;     
    margin: 0px;
    padding: 0px;
    background-color: #999999;
    border-top: 1px solid #dddddd;
    border-bottom: 1px solid #dddddd;
    }

#right_div {
    width: 230px;
    padding: 0px;
	background-color: #CCC;
    border: 1px solid #000;
    float: right;
    margin-top: 0px;
    }
#center_div {
    padding: 0px;
    border: 1px solid #000;
	background: #CCC;
    margin-left: 141px;
    margin-right: 242px;
    margin-top: 25px;
}
#left_div {
    width: 130px;
    padding: 0px;
    border: 1px solid #000;
	background: #CCC;
	float: left;
}
#footer {
	clear: left;
}

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
  <title>Service is Huge</title>
  <link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>

  <div id="container">
  	 <div id="header">
  	 </div><!-- header -->
  	 <div id="navigation">
	 	  <ul>
		  <li><a href="#">Contact</a></li>
		  <li><a href="#">Solututions</a></li>
		  <li><a href="#">Partners</a></li>
		  <li><a href="#">Services</a></li>
		  <li><a href="#">About</a></li>
		  </ul>
  	 </div><!-- navigation -->
  	 <div id="left_div">
 	 	  Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test
     </div><!-- left_div -->
     <div id="center_div">
 	 	  Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test
     </div><!-- center_div -->
  	 <div id="right_div">
     	  Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test 
     </div><!-- right_div -->
  	 <div id="footer">
  	 </div> <!-- footer -->	 
  </div><!-- container -->

</body>
</html>

**drhowarddrfine** · Dec 27, 2006 21:52

Quick note: you are using Xhtml end tags but declaring Html. Remove the closing slash on your <link>.

Also, your doctype is incomplete. See my link below. Use html4.01 strict.

Your center div is a block element so it is occupying all the space above the right div. Float it left and set its width. Also, you should remove the left and right margins.

User Tag List

Thread: CSS Layout Help - Absolute vs. Relative Position

Thread Tools

Display

CSS Layout Help - Absolute vs. Relative Position

Now what?

Bookmarks

Bookmarks

Posting Permissions