Greetings,

I am trying to create the following layout using only <divs>

http://www.coraconnection.com/web/css-comp.gif

The page looks fine on Mac FireFox / Safari.

However the product area is overlapping the top content area wrapper in IE7 (on 
XP)!
It does not break at the  productArea <div>!


Here is some the CSS.

#mainContent { 
    width: 1018px; 
    height: 330px; 
    border-top: 2px solid  #3274a8;
    display:block;
    background: url(../images/contentAreaGrad.png) repeat-x 0 0; 
    margin:18px auto; 
    padding:1px;
    }

#leftColumn  {
    width: 352px;
    float: left;


 #productArea {
    padding:1px;
    width: 1018px; 
    position:relative;
    text-align:center;
    top:-120px; 
    margin:18px auto;  
    height: 100%;  
    display:block;
    clear:both;
    }

.productBox {
    clear:right;
    vertical-align:top;
    width: 240px; 
    height: 100%; 
    display:inline-block; 
    background: url(../images/productBoxGrad.png)  repeat-x 0 0; 
    overflow: auto;
}

#productArea .productBox  p { padding-left:4px; margin:1em;   }

#productArea .productBox img {margin-right:1em; vertical-align:top;}


Suggestions are welcomed!!!



Dave Gilden  MCSD // member of American Federation of Musicians Local 72-147
(kora musician / audiophile / webmaster @ www.coraconnection.com  / Ft. Worth, 
TX, USA)


================================================
        Cora Connection: Your West African Music Source   -- online since 1996!
          Resources, Recordings, Instruments & More!
              <http://www.coraconnection.com/> 
================================================



______________________________________________________________________
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/

Reply via email to