Sent by David Gilden on 18 August 2009 19:07
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 [EMAIL-REMOVED]]
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/
