Hello,

I'm having trouble with a new design I'm trying to complete. I wondered if someone here might be able to help me understand what's happening? I know IE6 has funky ways of displaying things, but for me it's always a guessing game to figure out what exactly what will work. I would love for someone to tell my why IE6 is doing what it's doing on the following page so I can understand how to eliminate the problem.

thewebdesignloft.com/new/index.htm

I've finally gotten it to work (I think) in FF, Opera, and IE7. IE6, however, is a different story. Now I must say that in order to make it work in FF and Opera, I had to add overflow:hidden; to two containers. I'm not sure if that was the right thing to do. Here's the relevant CSS:

/*HEADER*/

#mastHead { /*this is the large green area*/
width: 100%;
height: 250px;
background: #65aa69;
overflow: hidden;
}

#header { /*this is just supposed to be like a white band across the mastHead*/
width: 100%;
height: 130px;
background: #fff;
margin-top: 5px;
border-top: 5px solid #acfaa4;
}

#headContainer { /*I added this so the logo and Get Started would have a containing div since they are both floating*/
width: 760px;
margin: 0 auto;
overflow: hidden;
}

#logo {
width: 286px;
height: 125px;
margin: 0 auto;
float: left;
padding: 0;
}

#getStarted {
width: 300px;
float: right;
text-align: right;
margin: 0;
font-family: georgia, 'times new roman', serif;
color: #069;
font-size: 1.8em;
padding: 0;
}

#byLineContainer { /*this is the white italics at the bottom of the green*/
width: 760px;
margin: 30px auto 0 auto;
}

#byLine {
width: 600px;
float: left;
color: #fff;
text-align: left;
font-size: 2em;
font-family: georgia, 'times new roman', serif;
font-style: italic;
clear: both;
}


I've been accused of being "div happy" before, and I'm sure that's true even now. But do you see why IE6 is doing that? Why is it?? And how do I fix it?

I will be ever so grateful for any help!