I'm working on site with some main containers and a 3-column content area inside the containers. The middle column on IE win is getting bumped down below the left column when it should be aligned to top. I'm kind of a novice so I have no idea what's going on. Can anybody help?

Here are my files:
www.artesiandesigngroup.com/westcoastpipe/grid.html
www.artesiandesigngroup.com/westcoastpipe/includes/main.css

<pre id=code><font face=courier size=2 id=code>body {
font-family: Arial, Helvetica, sans-serif;
background-color: #fff;
text-align: center;
margin: 0; padding: 0; }

/*** outside wrapper including fading background ***/
#container {
position: relative;
margin: auto;
text-align: center;
width: 840px;
background: url(../images/layout/bg_page.gif) repeat-y center top; }

/*** actual container ***/
#pagesize {
margin: auto;
text-align: center;
width: 800px;
background-color: #9B9EA0;
border: 1px solid #fff;
border-bottom: none; }

/*** row 1 - top ***/
#header {
background-image: url(../images/layout/header.jpg);
background-repeat: no-repeat;
background-position: center top;
margin: 0;
padding: 0;
width: 800px;
height: 252px;
border-bottom: 1px solid #fff; }

/*** Nav inside header ***/
#topnav {
position: relative;
top: 150px;
width: 800px;
height: 102px;
margin: 0; padding: 0;
background-color: #005195;
color: #fff;
font-size: .7em;
}
#topnav ul {
margin: 0; padding: 0; }
#topnav li {
text-transform: uppercase;
display: inline;
list-style-type: none;
margin: 0; padding: 2px 4px;
vertical-align: middle;
border-right: 1px solid #fff; }

/*** row 2 - middle ***/
#content {
background: url(../images/layout/bg_content.gif) repeat-y center top;
background:color: #fff;
border: 1px solid #fff;
border-bottom: none;
margin: 30px 30px 0 30px;
padding: 0;
text-align: left; }

/*** column 1 - left ***/
#sidebarphotos {
float: left;
margin: 0; padding: 0;
width: 161px;
font-size: .8em; }

/*** column 3 - right ***/
#sidenav {
margin: 0; padding: 0;
float: right;
width: 170px;
background-color: #555;
font-size: .8em;
color: #ddd; }

/*** column 2 - center ***/
#textarea {
width: 395px;
margin: 0; padding: 0;
margin-right: 170px;
margin-left: 169px;
background-color: #fff;
font-size: .9em;
vertical-align: top; }

/*** header for textarea ***/
#contentheader {
margin: 0;
padding: 4px 8px;
vertical-align: middle;
background: #dff url(../images/layout/bg_contentheader.jpg) repeat-y left top;
font-size: 1em;
font-style: normal;
font-weight: normal;
text-transform: uppercase;
color: #005195;
line-height: 1em;
border-bottom: 1px solid #555;
}

/*** row 3 - bottom ***/
#footer {
width: 800px;
margin: 0;
padding: 2px 0;
background-color: #005195;
font-size: .6em;
color: #fff;
border-top: 1px solid #fff;
border-bottom: none;
letter-spacing: .1em;
}</font id=code></pre id=code>

Thanks in advance for your help!

Daniel Peterson
Artesian Design Group
www.artesiandesigngroup.com

looking at your source, the txt in the conent panel isn't declared as anything. it's just plain text, and IE dosn't like this.

make it a &lt;p&gt; or &lt;h1&gt;, remove padding + margin and it will flow to top.

with regards to your css, there's a better way to get the columns, without using floats.
check out the layout resevoir at www.bluerobot.com/ and check out his 3col layout.

regards

Dave Thomas
<b>DMX Zone Manager</b>

<BLOCKQUOTE id=quote><font size=1 face="Verdana, Arial, Helvetica" id=quote>quote:<hr height=1 noshade id=quote>
looking at your source, the txt in the conent panel isn't declared as anything. it's just plain text, and IE dosn't like this.

make it a &lt;p&gt; or &lt;h1&gt;, remove padding + margin and it will flow to top.

with regards to your css, there's a better way to get the columns, without using floats.
check out the layout resevoir at www.bluerobot.com/ and check out his 3col layout.

regards

Dave Thomas
<b>DMX Zone Manager</b>

<hr height=1 noshade id=quote></BLOCKQUOTE id=quote></font id=quote><font face="Verdana, Arial, Helvetica" size=2 id=quote>

Thanks for the tip, Dave. I don't think Blue Robot's layout would work with my layout, though. His requires absolute positiong, while mine is inside a centered (floating) div. I tried his implementation but it doesn't work with relative positioned side navs, only absolute positioned divs... unless I'm missing something.

I put the text inside a tag but it still rags below the left column. Any other suggestions?

Thanks!

Daniel Peterson
Artesian Design Group
www.artesiandesigngroup.com

OK, I tried the absolute positioning again (Blue Robot style) and they all line up vertically now.
Thank you for the tip again!

BUT, now I have a new problem showing up in EVERY browser... my left and right columns don't affect the height of my page... ie. the footer doesn't bump down when they are taller than the middle column. The footer is starting at the end of the middle column, not at the end of the longest column like it should.

Check out my new files:
www.artesiandesigngroup.com/westcoastpipe/grid.html
www.artesiandesigngroup.com/westcoastpipe/includes/main.css

How do I get the side columns to affect the height of the content area?


Daniel Peterson
Artesian Design Group
www.artesiandesigngroup.com

On a site i did recently I had a similar thing where the footer had to be 'pushed down' by the content above. The way I got round it was by creating a DIV for my footer and using 'clear: both;' in the Class I created for it.

___________________________________
* Sorry... how do you do that again?... *

<BLOCKQUOTE id=quote><font size=1 face="Verdana, Arial, Helvetica" id=quote>quote:<hr height=1 noshade id=quote>
On a site i did recently I had a similar thing where the footer had to be 'pushed down' by the content above. The way I got round it was by creating a DIV for my footer and using 'clear: both;' in the Class I created for it.
<hr height=1 noshade id=quote></BLOCKQUOTE id=quote></font id=quote><font face="Verdana, Arial, Helvetica" size=2 id=quote>

Hey, Matt, thanks for the reply. The footer's already got a clear on it, though.
I think the problem is in my absolute positioning of the side columns, but not in anything else. when something's got an absolute vertical position does it not affect anything else vertically on the page?

I'm beginning to doubt the all-powerful CSS. ...I know half the problem is poor/buggy browser support (especially in IE). There are just way too many work-arounds to get something to display correctly. I might revert to some tables to get this design to lay out correctly! I don't want to do that! <img src=../images/dmxzone/forum/icon_smile_wink.gif border=0 align=middle>

Daniel Peterson
Artesian Design Group
www.artesiandesigngroup.com