I am working on a site, using CSS extensively (for the first time). I have the site set up with a top section, then navigation is on the left and is 190 px wide.

My whole site is in "#outer" which I have setup as 100% width. In it, I then have my "#toppage", then I have "#links" and "#inner". The problem I am having is that the "#inner" section sometimes is wider than the page, thus the person viewing the site has to scroll horizontally.

Here is what I have setup so far as far as page setup.

#outer {width: 100%; margin: 0px}
 
#toppage {background-color: rgb(128,0,115); height: 120px}
#toppage h1 {text-align: center; padding: 10px; margin: 0px}
#toppage img {margin: 0px}
 
#inner {display: block; position: absolute; top: 130px; margin-left: 170px;
     margin-right: 20px; padding: 0px}
#inner b {font-size: 14px}
 
#links a  {font-size: 12px; text-decoration: none; display:block; width:125px;
     margin:2px; padding:2px; background-color:#0881b2; text-indent: 10px}
#links a:hover {text-decoration: underline; background-color:#76c4e3}
#links ul {list-style-type: none; margin: 5px; 0px 0px 5px; padding-left: 0px}
#links ul li a {text-decoration: none; color: white}
#links ul li a:hover {text-decoration: underline; color: black}
#links p{margin: 0px; padding-left: 10px}

I would really appreciate any help and feedback anyone can provide me. Thank you in advance.

Leebert45

Would you mind posting your html too? Or even better a link to the page in question if it's online somewhere. I think we're going to need to see how the page is structured in addition to seeing the css to be able to help solve the issue.

Sure, thanks.

The site is at http://www.kdtc.org/new

Thank you.
Leebert

The biggest problem I see is that you're using position:absolute on everything and that's not the best way to do a layout and it's also completely unnecessary. You'd be better off learning to use the normal document flow and floats.

First I agree with LNR about using floats and understanding the normal document flow instead of using positioning for everything. There will be a learning curve, but it will make your life easier.

The only page I see where the content is too wide is the Instructors page. It looks like you have the content inside a table and I see this to start the table

<table width="1240">

Just remove the width="1240" and your content should fit within the width you want.

Thank you all for your help.

Leebert45