Resize gets horizontal bar

HTML & CSS
1

Hello,

I have finally figured out how to hack IE but at wits end trying to get the page content to stay within the confines of the page when I re-size it. Tried everything I know of accept what works. Can you help. I’m just a back yard mechanic and my CSS might be ugly but it validates.

I know its in percentages but can’t figure out where. I can put a 100% in the wrap but I don’t want the pages to be full like that.

Thanks for any help.

Site at About Warren and Watters

My CSS:


#wrap {
  margin:0 auto;
  width: 750px;
}
body {
  background-color: #000000;
  color: #ffffff;
  margin-top: 0;
  padding:0;
}
img {
  border: none;
}
h1 {
  font-family: "times new roman", times, serif;
  font-size: 2.75em;
  padding: 5px 0 0 15px; 
}
h2 {
  font-family: arial, helvetica, sans-serif;
  color: #ffffff;
}
p {
  font-family: arial, helvetica, sans-serif;
  font-size: 12pt;
  padding: 10px;
}
#center {
  margin: 0;
  padding: 0;
  text-align: center;
}
#top {
  background: url(images/wwheader.JPG) no-repeat; 
  height: 94px; 
  width: 750px;
}
#navcent {
  background-color: #000000;
  color: #ffffff;
  font-family: arial, helvetica, sans-serif;;
  font-size: 14px;
  list-style: none;
  padding: 15px 0 0 0;
  text-align: center;
}
#navcent ul {
  margin: 0;
  padding: 0;
}
#navcent li {
  display: inline;
}
#navcent ul li a:link, ul li a:visited {
  background-color: #000000;
  color: #00ffff;
  text-decoration: none;
}
#navcent ul li a:hover {
  background-color: #000000;
  color: #ffff00;
}
#content {
  background-color: #000000;
  color: #ffffff;
  margin-bottom: 75px;
  padding: 10px;
  font-family: Arial, Helvetica, sans-serif;
}
#content ul li {
    list-style: none;
}
#content p.center {
  background-color: #000000;
  color: #00ffff;
  text-align: center;
}
#content a {
  background-color: #000000;
  color: #00ffff;
  text-decoration: none;
}
#content ul li a:hover {
  background-color: #000000;
  color: #ffff00;
}
#content ol li a:hover {
  background-color: #000000;
  color: #ffff00;
  text-decoration: none;
}
#content p.list a:hover {
  background-color: #000000;
  color: #ffff00;
}
#content p.center a:hover {
  background-color: #000000;
  color: #ffff00;
}
#center p.list a:hover {
  background-color: #000000;
  color: #ffff00;
}
#flashcontent7104 a:hover {
    background-color: #000000;
    color: #ffff00;
}
2

trying to get the page content to stay within the confines of the page when I re-size it

Hi,
You have your page set at a fixed width of 750px, when your viewport gets below that it introduces a horizontal scroll bar to allow access to the content.

If you will use min-max widths it will give you some flexibility at smaller viewport widths.

In doing that I would remove the width from your #top div and let the #wrap control it with min-max widths. Then set the #top background image at 50% 0 to keep the image centered.

Something like this will work in all browsers except IE6 which doesn’t support min-max dimensions.

#wrap {
margin:0 auto;
[COLOR=Blue]min-width:500px;
max-width:750px;
overflow:hidden;[/COLOR] [COLOR=Blue]/*contain floats*/[/COLOR]
}
#top {
background: url(images/wwheader.JPG) no-repeat [COLOR=Blue]50% 0[/COLOR];
height: 94px;
[COLOR=Red]/*width: 750px;*/[/COLOR]
}