Wow, I didn't realize I was this much of a CSS newb - code looks fine...

[DaveLinger]

I'll explain to you what I'm trying to design first, then show you my code ;D

Basically it's a web layout. I have one div containing everything, #outer, that has a 10px white border around it. This div is centered using "auto" margins, and is exactly 730px wide, "auto" height.

Inside of #outer, I have #top and #middle, for 2 rows of stuff.

Inside of #top, I have #top_left, #top_center, and #top_right.

#top_left needs to be all the way in the top left corner, to display a logo. It needs to be exactly 125x125.
#top_right is in the same boat, but on the right. 125x125.
#top_center is the space between top_left and top_right which contains the page title banner.

Inside of #middle, I have #navigation and #window.

#navigation must be on the left (matching top_left), exactly 125px wide and as tall as #window.
#window takes up what's left of the horizontal room after #navigation and all of the vertical room it needs, as #window contains the dynamic page's data.

INSIDE OF #WINDOW, I have #main and #bottom.

#main is the content of the page
#bottom is the footer, must be at the bottom of #window, below the page content.

******************************
RECAP
******************************

#outer
    #top
          #top_left
          #top_center
          #top_right
    #middle
          #navigation
          #window
              #main
              #bottom

******************************
AND MY CODE...
******************************
[code]
<div id="outer">

<div id="top">
<span id="top_left">
<p>Meatball Logo</p>
</span>

<span id="top_center">
<p>Software Reuse Analysis Environment - Reuse Logo</p>
</span>
<span id="top_right">
<p>Reuse Logo</p>
</span>
</div>

<div id="middle">

<span id="navigation">
<p>Navigatey stuff goes here</p>
</span>

<span id="window">
<div id="main">
<p>main window contents</p>
</div>
<div id="bottom">

<p>footer contents</p>
</div>
</span>
</div>
</div>
[/code]
[code]
body{

background-color:#ccc;

text-align:center;

}

#outer{

margin-left:auto;

margin-right:auto;

border:10px solid #fff;

width:730px;

height:auto;

}

#top{

border:2px solid #006699;

border-bottom:0px;

height:125px;

}

#top_left{

background-color:#006699;

width:125px;

height:100%;

float:left;

}

#top_center{

height:100%;

width:auto;

float:left;

}

#top_right{

float:right;

width:125px;

height:100%;

}

#middle{

width:100%;

border:2px solid #006699;

}

#navigation{

float:left;

width:125px;

border-right:2px solid #006699;

}

#window{

float:left;

background-color:#fff;

}

#main{

vertical-align:top;

width:100%;

}

#bottom{

text-align:center;

vertical-align:bottom;

width:100%;

height:75px;

border-top:2px solid #006699;

}
[/code]

Example of this as it is...

http://www.davessonicsite.com/GST/test.htm

As you can see, it's totally screwed up. Gah!

[EvanAgee]

Your example link is no longer available, did you get this figured out?

[bronzemonkey]

Just a quick look at the code you posted.

You're using spans everywhere (and inappropriately) and yet your css fails to turn them into block elements. top_center is also unnecessary.