Filling out empty space with a div

Question

http://www.elliotnewman.com/index/test5.html
Is there a way to automatically fill the space between the two divs: "news" and "basket" with the div "spacer" ? "news" is floating to the left, and "basket" is floating to the right, so I just want the "spacer" to fill this gap.

Answer 1

Forgive for me for saying this, but your code suffers from a common newbie syndrome called "division-itis"  a tendency to wrap every single page element inside its own division.  This is counter-productive.  You shouldn't use ID except for top level elements such as #header, #navbar, #content, #sidebar, #footer.  Everything else should fit inside one of those divisions.
IMO your menu would be so much better if you simplified it and used an unordered list instead of all those divisions.
<ul id="navbar">
<li><a href="#">HOME</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">GALLERY</a></li>
<li><a href="#">VISUAL EFFECTS</a></li>
<li><a href="#">PRINT SALES</a></li>
<li><a href="#">NEWS</a></li>
<li><a href="#">CONTACT</a> </li>
</ul>
Then simply style your list to float:left and remove bullets like so.
/* BEGIN HORIZONTAL DROP-MENU */
#navbar ul{
margin: 0;
padding:0;
#navbar li {
list-style: none;
font-size: 12px;
float: left;
/**LINK STYLES**/
#navbar li a {text-decoration:none; display:block;}
#navbar li a:link {color: #CCC}
#navbar li a:hover,
#navbar li a:active,
#navbar li a:focus {color: #FFF; background: #333;}
You can see a working example here (look at the code to see how it comes together)
http://alt-web.com/DEMOS/CSS2-Horiz-Drop-Menu.shtml
Hope this helps,
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media  Specialists
http://alt-web.com/
http://twitter.com/altweb