Div's not sitting pretty...

[genrelab]

I'm having difficulties getting my DIVs to line up. Furthermore, the discrepancies are different in FF that in IE. Help would be appreciated. :confused:

LINK: www.sshuc.com/t4h (http://www.sshuc.com/t4h)

HTML:

<div id="container">
<div id="header">
<div>
&nbsp;
<p align="right"><input name="search" type="text" id="search" size="35" /> <input name="search_button" type="button" dir="ltr" lang="en" value="Search" xml:lang="en" />&nbsp;&nbsp;&nbsp;
</div>
<div id="header1a"><img src="images/A.png" alt="Traveling4Health.com" width="15" height="57" /><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('together','','images/B1.png',1)"><img src="images/B.png" alt="Traveling4Health.com" name="together" width="29" height="57" border="0" id="together" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('sun','','images/C1.png',1)"><img src="images/C.png" alt="Traveling4Health.com" name="sun" width="30" height="57" border="0" id="sun" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('fly','','images/D1.png',1)"><img src="images/D.png" alt="Traveling4Health.com" name="fly" width="29" height="57" border="0" id="fly" /></a><img src="images/E.png" alt="Traveling4Health.com" width="17" height="57" /></div>
</div>
<div id="header2">This area is for menu buttons.</div>
<div id="sidebar1">
<p><strong>Column One</strong></p>
<ul>
<li>Login button, or</li>
<li>Username and password fields</li>
<li>Register button</li>
<li>Animated menu here or below the banner</li>
</ul>
<p> </p>
</div>
<div id="sidebar2">
<div id="side1"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('rx','','images/rx1.png',1)"><img src="images/rx.png" alt="Traveling4Health.com" name="rx" width="68" height="87" border="0" id="rx" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('tooth','','images/tooth1.png',1)"><img src="images/tooth.png" alt="Traveling4Health.com" name="tooth" width="60" height="87" border="0" id="tooth" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('med','','images/med1.png',1)"><img src="images/med.png" alt="Traveling4Health.com" name="med" width="75" height="87" border="0" id="med" /></a></div>
<div id="side2"></div>
</div>
<div id="mainContent">
<p> </p>
<blockquote>
<p><strong>Main Welcome</strong></p>
<ul>
<li>Possible Video Commercial?</li>
<li>Flash Presentation?</li>
<li>Audio?</li>
<li>Could be split as welcome and featured advertiser?</li>
</ul>
<em>Lots of space here....</em>
<ol>
<li>How is this font size?
<ul>
<li><span class="style1">Can we get away with this size?</span></li>
</ul>
</li>
<li>How are we for color coordination and choices?
<ul>
<li>Is this too soft? Too neutral?</li>
</ul>
</li>
</ol>
</blockquote>
<!-- end #mainContent --></div>
<div id="footer">
&nbsp;<br /><br />

<!-- end #footer -->
</div>
<!-- end #container --></div>

CSS

@charset "utf-8";
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #f6f6f6;
text-align: center;
color: #000000;
}
.thrColLiqHdr #container {
width: 924px;
background: #FFFFFF;
text-align: left;
position: static;
height: 660px;
margin: 0pt auto;
}
.thrColLiqHdr #header {
height: 166px;
background-image: url(images/Traveling4Health1.png);
top: 0px;
position: relative;
background-repeat: no-repeat;
}
.thrColLiqHdr #header h1 {
}
.thrColLiqHdr #header1a {
height: 57px;
left: 804px;
top: 109px;
position: absolute;
}
.thrColLiqHdr #header2 {
height: 20px;
position: relative;
background-color: #FFFF33;
}
.thrColLiqHdr #sidebar1 {
float: left;
width: 203px;
background-image: url(images/sidebar-1.png);
background-repeat: no-repeat;
height: 410px;
position: absolute;
}
.thrColLiqHdr #sidebar1 p, .thrColLiqHdr #sidebar1 h3, .thrColLiqHdr #sidebar2 p, .thrColLiqHdr #sidebar2 h3 {
font-size: 16px;
font-style: normal;
}
.thrColLiqHdr #sidebar2 {
float: right;
width: 203px;
background-repeat: no-repeat;
position: relative;
height: 410px;
top: 0px;
clear: none;
padding-top: 9px;
}
.thrColLiqHdr #side1 {
width: 203px;
background-image: url(images/sidebar-2.png);
background-repeat: no-repeat;
position: absolute;
height: 87px;
padding-top: 0px;
}
.thrColLiqHdr #side2 {
width: 203px;
background-image: url(images/sidebar-2a.png);
background-repeat: no-repeat;
position: absolute;
height: 323px;
left: 0px;
top: 96px;
}
.thrColLiqHdr #mainContent {
background-image: url(images/main_content.png);
background-repeat: no-repeat;
position: absolute;
margin-top: 0px;
margin-right: 203px;
margin-left: 203px;
height: 410px;
}
.thrColLiqHdr #footer {
background-image: url(images/Traveling4Health2.png);
background-repeat: no-repeat;
position: absolute;
margin-top: 419px;
height: 84px;
width: 924px;
}
.thrColLiqHdr #footer p {
font-size: 16px;
text-transform: none;
text-decoration: none;
line-height: 24px;
}
.fltrt {
float: right;
margin-left: 8px;
}
.fltlft {
float: left;
margin-right: 8px;
}
.MagnifImage {background-color:#fff; color:#00f; font-weight:bold; border:4px outset #ccc; text-align:center; padding:0;margin:0;
}
.clearfloat {
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}

[drhowarddrfine]

If your 2007 Ferrari didn't act like your 1986 Yugo would you try and fix the Ferrari or suspect the Yugo? Firefox is the Ferrari so quit trying to "fix" it. Run your race with Firefox then you can tweak the Yugo/IE for the best performance you can get out of that piece of work.

EDIT: And as I started to look at your page my internet connection started acting up and I can't do anything now. :(

[genrelab]

Firefox is the Ferrari so quit trying to "fix" it.

Don't knock me for trying. I need this to work properly. FF is not the problem, IE is. I can't get the DIVs to layout properly in IE. If you can help great, but if you can't don't treat me like I'm doing something wrong by trying.

:mad:

[turboraketti]

It's a bit of a work to look through all code, contents and script on your page, so I'm afraid I haven't done that... However, the code seems a little more complicated than it would have to be to achieve the goals I think you're striving for. To make a layout such as yours, I would have done something like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>Page title</title>
<style><!--
#container { width: 700px; margin: 0 auto; border: 1px solid red; }
#banner { height: 200px; border: 1px solid blue; }
#menu { height: 30px; border: 1px solid gray; }
#colleft { float: left; width: 25%; border: 1px solid green; }
#main { float: left; width: 50%; border: 1px solid orange; }
#colright { float: left; width: 24%; border: 1px solid darkred; }
--></style>
</head>

<body>
<div id=container>
<div id=banner>#banner: logo, search box, ...</div>
<div id=menu>#menu</div>
<div id=colleft>#colleft<ul><li>Item 1</li><li>Item 2</li><li>Item 3</li><li>Item 4</li></ul></div>
<div id=main>#main<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi sit amet tellus vitae nulla iaculis sagittis. Aliquam vehicula, est ac aliquet adipiscing, neque lectus hendrerit nulla, a nonummy eros mauris vel nisl. Cras adipiscing mi a quam. Integer cursus quam non mi. Morbi nec nunc. Integer elit ipsum, pretium a, iaculis id, vehicula iaculis, est. Curabitur semper. Sed nunc velit, mollis non, aliquet in, posuere non, nunc. Vestibulum quam. Donec a purus. Nunc viverra magna congue velit. Maecenas consequat gravida purus. Fusce ut quam. Donec aliquet ipsum scelerisque neque. In metus nisi, vestibulum in, hendrerit vel, luctus nec, nulla.</p></div>
<div id=colright>#colright<p>Some images...</p></div>
<br clear=all />
</div>
</body>

</html>
As far as I can see, it looks nice in FF, IE6 & IE7. Take a look yourself at http://natbyggarna.se/test-t4h.php.

If you omit the borders, you may specify width:25% on #colright. I set it to 24% just to make space for borders, which otherwise would have made #colright wrap to next "row".

If you want to use more advanced css and make it work in MSIE, I recommend Dean Edwards' IE7v2: http://code.google.com/p/ie7-js/
I use it all the time, although it's still beta.

Hope this helps.

[WebJoel]

Don't knock me for trying. I need this to work properly. Fx is not the problem, IE is. ... The mildly ascerbic mockery is borne of most people's not understanding that generally if IE shows a page correctly while Firefox show the same page incorrectly, it is IE that is showing it wrong.
This can be a difficult concept to get one's head around, but Firefox correctly shows the page as 'wrong' ("busted", not aligned properly, etc.), and IE incorrectly shows the page correctly ("looks perfect in IE")... is a big clue. IE tends to show what it thinks you were trying to do... Firefox shows the page as it was written. This can be summed up in one word --> "Compliancy". And in IE's case, the lack thereof..

In short, trust in Firefox, be wary of IE.

I see that another member has posted a possible solution so I won't redux this, but do note something else:

<blockquote>
<p><strong>Main Welcome</strong></p>
<ul>
<li>Possible Video Commercial?</li>
<li>Flash Presentation?</li>
<li>Audio?</li>
<li>Could be split as welcome and featured advertiser?</li>
</ul>
<em>Lots of space here....</em>
<ol>
<li>How is this font size?
<ul>
<li><span class="style1">Can we get away with this size?</span></li>
</ul>
</li>
<li>How are we for color coordination and choices?
<ul>
<li>Is this too soft? Too neutral?</li>
</ul>
</li>
</ol>
</blockquote> "blockquotes" should be used only for 'blocks of quoted text' and not for presentational indentation. For that, you can use "margin" to 'indent' the "UL".
What you have now for a text-reader for the handicapped would be confusing... it will 'speak' that this is a "quote source" and then recite the list of the unordered list... This is unsemantic use of the tag and while the caveat might be made that 'I am not making this page with handicapped people as part of my targeted audience to see so it's not an issue', -well, ...ouch. :( Some 5+ years ago I used to be legally blind in one eye until surgery corrected my vision (in both eyes). I really cannot expound further.

[genrelab]

Hope this helps.

:rolleyes: I dunno, I dunno, I dunno...

www.sshuc.com/t4h (http://www.sshuc.com/t4h)

Turboraketti,
Unfortunately, I am not yet at the stage where I am able to code from scratch. However, your information and the link to the IE beta patches is greatly appreciated, and I have downloaded them for future use, if needed. Plus, your coding and sample helps me understand more about how the whole div layout thing works - thank you. I'm embarrassed to say that I rely on Dreamweaver to assemble most of my coding, and it seems to usually work out just fine. I've only been designing and building websites for 6 weeks, and I am teaching myself by reading forum posts and researching online instructional documents.

In regards to my issue, I seem to have worked it out. Unfortunately, I don't know how I did it. If any of you would like to spend a few minutes looking at the codes to tell me what the deciding factor was, I'll sponge the info.

And, Turbo... I'll come looking for you the next time I'm drowning in this mess again. Thanks.

Regards,
- @:)