Problem with lining up images using a DIV via CSS

[LobsterThief]

Hey everybody,

I'm attempting to line up some images using CSS but an not having much luck. I've carefully organized my HTML and CSS files but cannot figure out why this isn't working.

The page is here: http://www.calhounmarketing.com/Public/Jackie/

You can see that "text here!" should be in the center column and "Why are there two elections" should line up with the right side of the header (so the blue lines match up). Instead, they're both getting pushed down on the page.

Any help is greatly appreciated!

Thanks,
Zach

 

[PixelPusher]

Zach,

To start, you have an overuse of divs in your code.
Lets do this one by one...

1. 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".
   
2. 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).
   
3. 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.
   
4. 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

<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

<ul class="menu">
   <li><a href="">link</a></li>
   <li><a href="">link</a></li>
   <li><a href="">link</a></li>
</ul>

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.