# Positioning of DIV boxes



## Wozzer (Jan 23, 2011)

Hello all,

Im trying to build a website for my assignment and I've come across a problem. I'm trying to align a left side bar with a box that's placed in the center. I'm coding in HTML & CSS and so far, this is what I have.....

<div id="leftbar">
    <h3>sidebar1 Content</h3>
    <p>The background color on this div will only show for the length of the content. If you'd like a dividing line instead, place a border on the left side of the #mainContent div if the #mainContent div will always contain more content than the #sidebar1 div. </p>
    <p>Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque  eget, cursus et, fermentum ut, sapien. </p>
 </div>
<br />

---------------------------------

#leftbar {
	width: 11em;
	background: #EBEBEB; 
	padding: 15px 15px;
	margin: 5px 5px;
	left: 2px;
	top: 148px;
}

---------------------------------

Any ideas how to line it up so its pixel perfect?


----------



## Wozzer (Jan 23, 2011)

Anyone got any ideas?


----------



## FordGT90Concept (Jan 23, 2011)

Need more source than that to go by.  Specifically, what defines the main content of the page and the CSS that is styling it.


----------



## caleb (Jan 24, 2011)

Use Firebug CSS thing to try out diffrent stuff and learn by that ?
I'd put them both within a main div first tho.


----------



## Wozzer (Jan 24, 2011)

<!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>Untitled Document</title>
<link href="Stylesheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="header">
<h1 align="center"><img src="Web Images/Logo.jpg" alt="WebAir.com" width="400" height="150" /></h1>
</div>
<div id="contents&bars">
<!--WEBAIR MAIN CONTENT --> 
<div id="maincontent">
    <h1 align="center">width:250px;</h1>
</div>
<!--END MAIN CONTENT -->
<!--WEBAIR LEFTBAR --> 
<div id="leftbar">
    <h3>sidebar1 Content</h3>
    <p>The background color on this div will only show for the length of the content. If you'd like a dividing line instead, place a border on the left side of the #mainContent div if the #mainContent div will always contain more content than the #sidebar1 div. </p>
    <p>Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque  eget, cursus et, fermentum ut, sapien. </p>
 </div>
<br />
<!-- END LEFTBAR --> 
</div>
</body>
</html>


----------------------------------

@charset "utf-8";
/* CSS Document */

body  {
	font: 100% Verdana, Arial, Helvetica, sans-serif;
	background: #FFFFFF;
	margin: 0; 
	padding: 0;
	text-align: center; 
	color: #000000;
}

#header { 
	background: #FFFFFF; 
	padding: 0 10px;  
} 

#maincontent {
	margin: 0px 0px;
	padding: 15px 15px; 
	width: 1050px;
	margin: auto;
	border-style:solid;
	border-width:5px;
} 

#leftbar {
	width: 11em; /* since this element is floated, a width must be given */
	background: #EBEBEB; /* the background color will be displayed for the length of the content in the column, but no further */
	padding: 15px 15px; /* top and bottom padding create visual space within this div */
	margin: 5px 5px;
	left: 2px;
	top: 0px;
	position:relative;

}


----------



## FordGT90Concept (Jan 24, 2011)

First, your "leftbar" DIV must appear before the "maincontent" DIV in the HTML (remember, websites are processed top to bottom, left to right).  You could give them all very strict locations and then the order wouldn't matter but order does matter when floating content.

Second, in the CSS under #leftbar, remove "left" and "top" and add "float:left;"  That should get them to more or less line up.


----------



## Wozzer (Jan 24, 2011)

Brilliant - all fixed. Many thanks 

Wasnt aware that websites are read top to bottom, left to right. Learn something new every day


----------

