Hello,
I have a 3 column layout that is causing me trouble. The problem only shows up when I put content in the container named #wideContent.
I included a graphic to show you how the layout is actually structured.
diagram of layout: <snip> Note: The site is in test phase and there is a javascript window that pops up to show the height and
width of the elements in question. <snip> <snip> When #wideContent contains #wideContentInsideMajor (middle), #wideContentInsideL (left), and #wideContentInsideR (right) then the width of the body element actually decreases by 17 px (995px)and
the horizontal scroll bar appears When #wideContent is empty, the width of the body element is 1012px, and
the horizontal scroll bar disappears. I have spent hours trying to fix this problem. I have flipped through my css book and looked online.
I have stripped down my code and started from basic scratch.
It works fine in IE but not in Opera and Firefox.
I am not sure what next to do at this point and I would appreciate your help.
--------------Here is some of the css ---
html, body, #wrap {height: 100%;}
body
{
margin:0 auto;
padding:0;
background:#fff url(/i/am_bg.png) repeat;
font-family: Verdana, Arial, sans-serif; /*Lucida Sans*/
}
body > #wrap
{
margin:0 auto;
margin-top:0px;
width:1002px;
text-align:left;
background-color:transparent;
height: auto; /*needed for footer */
}
#TopDesignBar
{
z-index:-1;
position:absolute;
width:100%;
top:0.2px;
left:0.1px;
right:0.01px;
background: transparent url(/i/TopDesignBar.png) repeat-x;
height:167px;
}
#mastHead
{
top:0px;
height:100px;
border-top: solid 1px #ccc;
border-left: solid 1px #ccc;
border-right: solid 1px #ccc;
text-align:left;
overflow:hidden;
}
.TopBind #mastHead
{
width:100%;
height:auto;
background: transparent url(/i/mh_bg.gif) repeat-x;
}
.TopBind #Holder
{
border:0;
min-height:100%;
width:100%;
color:#000;
/*height:75em;*/
margin: 0 auto;
}
.TopBind #wideContent
{
background-color: transparent;
width:100%;
}
.TopBind #wideContentInsideMajorL
{
float:left;
font-size:0.9em;
width:21%;
background: transparent url(/i/discoLites.png) repeat-x;
padding-top:10px;
}
.TopBind #wideContentInsideMajor
{
left:1px;
font-size:0.75em;
background:transparent url(/i/midc_bg.png) no-repeat top right;
width:51.51%;
margin-right:24.99%;
margin-left:21%;
text-align:center;
padding-top:10px;
}
.TopBind #wideContentInsideMajorR
{
float:right;
font-size:0.75em;
background-color:transparent;
width:24.99%;
min-width:248px;
}
#footer
{
width:1002px;
margin:0 auto;
margin-top: -60px; /* -100px negative value of footer height */
height: 60px;
clear:both;
color:#4d4d4e;
text-align:center;
}
.TemplateA #main
{
padding-top:0px;
width:90%;
margin:0 auto;
}
.TemplateA .horizList
{
background: transparent url(http://example.com/menubar.png) repeat-x;
}
.TemplateA #Holder
{
background: transparent url(/i/discoLites.png) repeat-x; /*!*/
border-top: 0px;
}
[edited by: limbo at 9:24 am (utc) on Feb 23, 2010]
