Hi,
Please don’t double post as its bad etiquette.
You can’t layout your page like that I’m afraid as it is not viable for the web. I believe you have already been give this advice anyway in your other thread.
It is not advisable to absolutely place content on the page in fixed height and width boxes because it will break as soon as the user resizes the text or if the user has a different dpi setting. You should never (almost never) apply height to containers that hold text content. If you must apply height then use ems and not px anyway.
You should not absolutely position those boxes into place but rather let them take place in the flow if the document in the place that they would naturally fall. The layout should be two floated columns and then stack the content in each column as required without the need for further positioning.
The page content should ideally be in a page container and centred using auto margins. You will need a width to do this and an em width would be better than px width and even better would be a min max layout instead.
You really should have some content in their first as it is impossible for us to say how it should be styled until we see what it is. The content dictates a lot of how the page will be styled and indeed the html markup is the most important step in the proceedings as you can specify the heading levels and general structure which will then give you elements to target and structure rather than saying #div1,'div2 ,#'div3 which is a very bad naming process.
Here’s basic start of a centred layout with two columns and a header and your nav at the top.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
html, body, table {
margin: 0;
padding: 0;
font-size: 100%;
}
object, iframe, blockquote, fieldset, form, legend, table, caption, th, td {
margin: 0;
padding: 0;
border:none;
}
h1, h2, h3, h4, h5, h6, p, dl, dt, dd, ol, ul { margin:0 0 .75em }
ol, ul { list-style: none; }
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
vertical-align:top;
}
/* end reset styles */
body {
line-height:1.4;
font-size:88%;
}
#outer {
width:68em;
margin:auto;
background:f2f2f2;
padding:20px 0;
}
.logo, .logo span {
width:200px;/* width of logo*/
height:100px;/* height of logo */
margin:0;
position:relative;
overflow:hidden;
float:left;
}
.logo span {
position:absolute;
top:0;
left:0;
background:red url(restorelogo.jpg) no-repeat 0 0;/* red for testing only */
}
#nav {
padding:6px 0;
float:right;
}
#nav li { display:inline; }
#nav li a {
font-weight:bold;
background:#91E287;
padding:6px;
text-decoration:none;
text-transform:uppercase;
}
#nav li a, #nav li a:visited { color:#fff; }
#nav li a:hover, #nav li a:focus, #nav li a:active { background:#7A991A; }
#main {
clear:both;
overflow:hidden;
width:100%;
padding:10px 0 1px;
}
#sidebar {
float:left;
width:27em;
background:#eee;
}
#content {
width:40em;
float:right;
background:#eee;
}
.section {
border: 2px solid green;
padding:5px;
margin:0 2px 5px;
}
</style>
</head>
<body>
<div id="outer">
<h1 class="logo">Habitat for Humanity of Frederick County<br>
ReStore<span></span></h1>
<ul id="nav">
<li><a href="">Home</a></li>
<li><a href="">Donate</a></li>
<li><a href="">Volunteer</a></li>
<li><a href="">Habitat for Humanity of Frederick County</a></li>
</ul>
<div id="main">
<div id="content">
<h2>Main content goes here</h2>
<div class="section">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quam mi, interdum eu sodales nec, viverra porttitor arcu. In consectetur sem quis neque convallis quis vestibulum dolor porttitor. Aliquam diam odio, dictum at venenatis sed, dignissim quis arcu. Sed lectus leo, luctus eu convallis a, sollicitudin ac leo.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quam mi, interdum eu sodales nec, viverra porttitor arcu. In consectetur sem quis neque convallis quis vestibulum dolor porttitor. Aliquam diam odio, dictum at venenatis sed, dignissim quis arcu. Sed lectus leo, luctus eu convallis a, sollicitudin ac leo.</p>
</div>
<div class="section">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quam mi, interdum eu sodales nec, viverra porttitor arcu. In consectetur sem quis neque convallis quis vestibulum dolor porttitor. Aliquam diam odio, dictum at venenatis sed, dignissim quis arcu. Sed lectus leo, luctus eu convallis a, sollicitudin ac leo.</p>
</div>
</div>
<div id="sidebar">
<h3>Left Sidebar content goes here</h3>
<div class="section">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quam mi, interdum eu sodales nec, viverra porttitor arcu. In consectetur sem quis neque convallis quis vestibulum dolor porttitor. Aliquam diam odio, dictum at venenatis sed, dignissim quis arcu. Sed lectus leo, luctus eu convallis a, sollicitudin ac leo.</p>
</div>
<div class="section">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quam mi, interdum eu sodales nec, viverra porttitor arcu. In consectetur sem quis neque convallis quis vestibulum dolor porttitor. Aliquam diam odio, dictum at venenatis sed, dignissim quis arcu. Sed lectus leo, luctus eu convallis a, sollicitudin ac leo.</p>
</div>
</div>
</div>
</div>
</body>
</html>
You should take some time to read up on floats and positioning and general page layout otherwise you will keep running into a brick wall until you grasp how things can be laid out and how they interact with each other. It’s a steep learning curve at first but don’t give up and do some research and you will soon start getting the right idea. read through the in formation you were given in the other thread also.