Avatar of hcp27
hcp27Flag for United States of America asked on

WEBPAGE CONTENT ON RIGHT SIDE OVERLAPS WITH CENTER CONTENT ON ALL BROWSERS

I am looking over a webpage for a family member that I did not design. Attached is a screen shot of the content on the right side of the webpage shifting over the center content. It wasn't very bad on IE but it's really overlapped on all other browsers, specifically Firefox. I made a slight adjustment to the sites IE siteStyle CSS sheet and it fixed the minor shift for IE. I cannot do the same adjustment on the main siteStyle.css sheet cause it will also effect the rest of the website. The page on the screenshot is the only one that has this problem. I do not really know enough about CSS to fix this problem.
Capture.JPG
CSSWeb BrowsersPHP

Avatar of undefined
Last Comment
Ahmed Merghani

8/22/2022 - Mon
Ahmed Merghani

Can you post the CSS file?
ASKER
hcp27

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

body{
      margin-top:0px;
      background-color:#999999;
      color:#000000;
      font-family:Helvetica, Arial, sans-serif;
      font-size:12px;
      margin:0px;
      padding:0px;
      height:100%:
}

h1{
      font-size:18px;
      margin-top:0px;
}

h2{
      font-size:14px;
      margin-top:0px;
}

p{
      font-size:12px;
      margin-bottom:0px;
      padding-bottom:0px;
}

a{
      color:#3361af;
      text-decoration:none;
}
a:hover{
      color:#003366;
}

a img{
      border:none;
}

#wrapper{
      margin-top:0px;
      min-width:1000px;
      max-width:1250px;
      position:absolute;
      left:50%;
      margin-left:-500px;
      min-height:600px;
      background-repeat:no-repeat;
      background-color:#FFF;
}

#staticBG{
      width:100%;
      height:100%;
      position:fixed;
}

#header{
      height:100px;
      margin-left:200px;
}

#header1{

}

#leftSidebar{
      float:left;      
      width:170px;
      margin-right:10px;
      margin-top:15px;
      padding:10px;
      /*border: thin solid #3361af;*/
}

#centerContent{
      width:598px;
      float:left;
}

#rightSidebar{
      position:absolute;
      right:0px;
      top:118px;
      width:170px;
      padding:10px;
      /*border: thin solid #3361af;*/
      text-align:right;

}

#rightSidebar div{
      background-color:#668CAB;
      padding:10px 0px;
      margin-top:10px;
      width:170px;
      text-align:center;
      
}

#headerlogo{
      margin-top:-100px;      
}

#rightSidebar a{
      color:#FFF;      
}

#rightSidebar a:hover{
      color:#FF0;      
}

.sidebar img{
      width:170px;
      margin-top:10px;
}


#nav{
      width:573px;
      padding:5px 10px 5px 10px;
      margin-top:15px;
      clear:both;
      font-size:12px;
      color:#FFF;
      background-color:#003366;
}

#nav a{
      color:#FFF;      
}

#nav a:hover{
      color:#999;      
}

#nav ul{
      padding:0px;
      margin:0px;
}

#nav ul li{
      display:inline;
      clear:none;
      padding:0px;
      margin:none;
      margin-right:70px;
}


.content{
      width:573px;
      padding:10px;
      margin-top:30px;
      clear:both;
      display:block;
/*border:thin #3361af solid;*/}

.mapBox{
      padding:10px 0px;
      border:thin #3361af solid;
}

#footer{
      font-size:10px;
      width:573px;
      margin-top:30px;
      padding:3px 10px;
      bottom:0px;
      clear:both;
      display:block;
      text-align:center;
      border-top: thick solid #003366;
}

#footerSpacer{
      height:50px;
      clear:both;
}


/**
 *Misc Coloring and modifications
 */
.selectedLink{
      color:#6699FF;
}

.inlineLink{
      color:#3361af;
      text-decoration:underline;
}
.inlineLink a{
      color:#3361af;
      text-decoration:underline;
}
.inlineLink a:hover{
      color:#003366;
      text-decoration:underline;
}

.quote{
      margin-top:10px;
      color:#000099;
      float:right;
      font-size:10px;
}

/**
 *Layout Formatting classes
 */

.clearDiv{
      clear:both;
      display:block;
}

.floatRight{
      float:right;
}

.floatLeft{
      float:left;
}

.horizontalUL{
      margin-left:0px;
      padding-left:0px;
}

.horizontalUL li{
      display:inline;
      list-style:none;
      margin-left:15px;
}


/**
 *Forms
 */
 
#contactForm{
      text-align:right;
      margin:0px 20px 10px 0px;
}

#contactForm input, select{
      margin-bottom:10px;
}


/**
 * PAGE SPECIFIC STYLES
 */

.langList{
      width: 30%;
      padding:10px;
      padding-left:0px;
      float:left;
}

.languageLetterSection{
      font-size:14px;
      color:#990000;      
      font-weight:bold;
}
Ahmed Merghani

Try to change in "rightSidebar" and "rightSidebar div" left and right padding to 0;
All of life is about relationships, and EE has made a viirtual community a real community. It lifts everyone's boat
William Peck
LZ1

This is because you have the right sidebar positioned absolute.  Your #wrapper can't hold things that are positioned like that.  I would recommend using CSS faux columns found here:

http://www.code-sucks.com/css%20layouts/faux-css-layouts/
ASKER
hcp27

Changing the padding to 0px helps it a lot but still overlaps a little.
ASKER
hcp27

I adjusted the ridesidebar padding to -18px and it's positioned right where it needs to be. Now I need the wrapper to be a little bigger to extend the white background so the rightsidebar is placed on it. I placed a screenshot of it now.
Capture.JPG
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
LZ1

The absolute positioning can be avoided by using floats and the article above.  Have you tested this in multiple resolutions/browsers?
ASKER
hcp27

At this time I cant use the faux option. I have tested this on firefox,chrome and safari and they all show the exact same problem. I was able to fix it in IE by removing the padding and changing it to 0px on the IE styeSheet. For all the other browsers, right sidebar was changed   to -18px on the main stylesheet. Now I need to know how to make the wrapper a little wider so everything fits again. I know this isn't the best fix but this is what is being requested by the site owner.
ASKER CERTIFIED SOLUTION
LZ1

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
See how we're fighting big data
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
ASKER
hcp27

Thank you, i'll start with that and see how that works. I didn't make this site and have never looked at the sites sytlesheets and CSS until today.
Experts Exchange has (a) saved my job multiple times, (b) saved me hours, days, and even weeks of work, and often (c) makes me look like a superhero! This place is MAGIC!
Walt Forbes
Ahmed Merghani

In the "centerContent" increase the width as you want. May be you will need to increase the width in "content" also.