[css-d] DIV vertical expansion help

[Laurie Landry]

Hi,

I am currently working on my website:

http://cartierbaileystudio.com/2010/layoutnew.html

In firefox and safari (on Mac), it works fine, but when I do this test  
in Windows IE 7, what happens is that the text that is in the blue- 
green box overflows over to the next div section (see 
http://cartierbaileystudio.com/2010/IE7Screenshot.jpg) 
.

Ideally, the blue box should expand with the text, and the subsequent  
div sections below it shifts down as needed.  Any idea what I need to  
do to make this work?

Thanks in advance!



The CSS file can be found here:

http://cartierbaileystudio.com/2010/css/style.css

or as below:

@charset "UTF-8";
/* CSS Document */

#wrapper {
        width: 900px;
        margin-left: auto;
        margin-right: auto;
        padding: 5px;
        margin-bottom: 15px;
        border: 1px solid #60C1AB;
}
#logo {
        text-align: left;
        float: left;
        height: 100px;
        width: 313px;
}
#slogan {
        font-family: "Trebuchet MS", Helvetica, Arial, sans-serif;
        font-size: x-large;
        color: #000000;
        text-align: right;
        float: right;
        width: 500px;
        margin-top: 70px;
        font-weight: lighter;
}
.creativity {
        font-weight: bolder;
        color: #BA6B51;
}
#contentwrapper {
        text-align: left;
        width: 856px;
        margin-right: auto;
        margin-left: auto;
        margin-top: 25px;
        margin-bottom: 25px;
        clear: both;
        float: none;
}
.whitespace {
        clear: both;
        height: 10px;
        width: 856px;
}
#navcontainer {
        margin: 0px;
        padding: 0px;
}
#navcontainer ul
{
        text-align: right;
        padding-bottom: 5px;
        padding-top: 5px;
        padding-left: 0;
        background-color: #BA6B51;
        color: white;
        width: 100%;
        font-family: Arial, Helvetica, sans-serif;
        font-size: small;
        margin: 0;
}

#navcontainer ul li
{
        display: inline;
        padding-left: 0;
        padding-right: 0;
        padding-bottom: 5px;
        /* matches link padding except for left and right */
padding-top: 5px;
}

#navcontainer ul li a
{
        padding-left: 10px;
        padding-right: 10px;
        padding-bottom: 5px;
        padding-top: 5px;
        color: white;
        text-decoration: none;
}

#navcontainer ul li a:hover
{
        color: #60C1AB;
}

#navcontainer #active {
}
#sectionals   {
        margin: 0px;
        padding: 0px;
        clear: both;
}
#graphicdesign {
        text-align: left;
        width: 274px;
        float: left;
}

#framing {
        text-align: left;
        width: 274px;
        float: left;
}
#fineart {
        text-align: left;
        width: 274px;
        float: left;
}
.sectioncontent {
        font-family: "Trebuchet MS", Georgia, serif;
        font-size: small;
        color: #FFFFFF;
        padding-top: 5px;
        padding-right: 5px;
        padding-bottom: 5px;
        padding-left: 10px;
}
.verticalspace {
        width: 17px;
        height: 10px;
        float: left;
}
#maincontent {
        background-color: #60C1AB;
        width: 856px;
        clear: both;
        height: 375px;
        margin: 0px;
        padding: 0px;
}
#image_main img {
        float: left;
        height: 312px;
        width: 306px;
}
#content_main {
        margin-right: 15px;
        font-family: "Trebuchet MS", Georgia, serif;
        font-size: small;
        margin-bottom: 0px;
        width: 530px;
        float: right;
}
p.main {
        padding: 0px;
        margin-top: 0px;
        margin-right: 0px;
        margin-bottom: 10px;
        margin-left: 0px;
}
h1.mainhead {
        color: #FFFFFF;
        padding: 0px;
        margin-top: 15px;
        margin-right: 0px;
        margin-bottom: 5px;
        margin-left: 0px;
        font-weight: normal;
}
#updates {
        width: 856px;
        clear: both;
        margin-bottom: 5px;
        height: 150px;
}
#news {
        padding: 0px;
        width: 500px;
        margin: 0px;
        float: left;
}
.newsheadline {
        font-family: "Trebuchet MS", Georgia, serif;
        font-size: xx-large;
        font-style: normal;
        font-weight: bold;
        margin: 0px;
        padding: 0px;
        color: #5A3A00;
}
.newscontent {
        font-family: "Trebuchet MS", Georgia, serif;
        font-size: small;
        font-weight: normal;
        margin: 0px;
        padding: 0px;
}
#offers {
        float: right;
        width: 300px;
        border: medium dashed #BA6B51;
        height: 125px;
        padding-top: 5px;
        padding-right: 10px;
        padding-bottom: 5px;
        padding-left: 15px;
}
.offerheadline {
        font-family: "Trebuchet MS", Georgia, serif;
        font-size: x-large;
        font-weight: bold;
        color: #5A3A00;
        margin: 0px;
        padding: 0px;
}
.offercontent {
        font-family: "Trebuchet MS", Georgia, serif;
        font-size: small;
        margin: 0px;
        padding: 0px;
}

#colophon {
        font-family: "Trebuchet MS", Helvetica, Arial, sans-serif;
        font-size: small;
        color: #660000;
        text-align: center;
        clear: both;
        margin-top: 15px;
        padding: 5px;
}



______________________________________________________________________
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/