Zach,
To start, you have an overuse of divs in your code.
Lets do this one by one...
- I would remove the div that is labeled "id-header-lower". It is a waste. Just add that part of the image to the images in the "upper-header".
- Remove the div labeled "id-body-left-1". There is no need for this. Just add either padding to the "id-body" div or to the element that hold the links (red section).
- Your red link section: This is a list of links, so you should use a list not a series of anchors and line breaks. Use a unordered list (ul) and remove the list style. Set the background of the list to the red image. For the blue "Contribute" button, use the background of that link. Added code below.
- For the right side (blue section): This could also be created with a list. You will want to add a paragraph and anchor to each list item (li). Again here you will want to remove the list style.
Reason for div wrapping...
The reason your div with "text here!" is wrapping to because the far left column div has no declared width so it is taking up all the space, therefore the next available place is right below.
Things to note:
- When ever you use a div and do not declare the width, the div will automatically stretch to fit its parent container. If there is not a parent container then it will stretch to the width of the browser window.
- Whenever you use absolute positioning, that element will lay above any other static positioned (any element without a position declared, default state). This is why the links are on the left and are not sitting before the "text here!" div.
Try looking into floats for your content. This is an excellent method for stacking divs (or any other element) next to one another. Look at
W3 schools for more reference
Site Layout
HTML:
<div class="header">
header content...</div>
<div class="body">
<ul class="redNav">
<li><a href="">Link</a></li>
<li><a href="">Link</a></li>
<li><a href="">Link</a></li>
</ul>
<div class="middletext">
Text here!</div>
<ul class="blueNav">
<li>
<p>Text paragraph blah blah....</p>
<a href="">Link</a>
</li>
<li>
<p>Text paragraph blah blah....</p>
<a href="">Link</a>
</li>
</ul>
</div>
<div class="footer">Footer text...</div>
Building a menu with a List
HTML:
<ul class="menu">
<li><a href="">link</a></li>
<li><a href="">link</a></li>
<li><a href="">link</a></li>
</ul>
Code:
ul.menu {
float:left;
width:200px;
margin:0;
padding:0;
background: url(yourRedImage.png) center;
}
ul.menu li {
list-style:none;
margin:2px 0;
padding:0;
}
ul.menu li a:link, ul.menu li a:visited {
font:bold 10pt Tahoma;
color:#fff;
text-decoration:none;
text-transform:capitalize;
}
ul.menu li a:hover, ul.menu li a:focus {
text-decoration:underline;
}
Questions? feel free to ask, we are here to help.