CSS Webpage Problem

[alt20]

Hi,

I have created an HTML file by editing a CSS file I got from Blogger.com. I was using this page in a frames page and it was working fine, but then something happened and now the html page no longer fits in the 600px wide frame and I get a scrollbar. I can't for the life of me work out what I've done. Please help!

The HTML file is here:

http://www.bandsoc.com/mpk/home.html

The frames page is here:

http://www.bandsoc.com/mpk/index.html

I'd be most grateful for any help. Thanks

Alt

 

[Vragabond]

There's a couple of problems in your page that originate from lack of understanding CSS. I don't mean that in a bad manner, I just think that you might have used a css file that was way over your head. Let's first look at the problem:

Floated elements (your main content) are taken out of the flow of the page and as such do not extend their parent elements. This means your #wrap div is actually 0px high (you can add a border around it to see it for yourself). It is however 400px wide and centered (margin-left and margin-right are set to auto). Since your container is 600px wide, this means div #wrap lies 100px from left and 100px from right. Your #main-content does not lie within the #wrap container but it still goes on from the point where that one ended. It is 500px wide. That means #main-content extends from 100px another 500px which makes it 600px. You also have margins in your body at value 10px which makes your entire page 620px wide. And the scrollbars appear. Now, what to do:

Depends on what you want. First things first, your main-content does not need and should not be floated. So remove float: left; from there. Second decide what exactly you want. You have wrapper div 400px and inside div at 500px. That just won't go. Remove the inside divs width and assume wrapper divs. You can change that one to 500px if you so wish.

Hope it sheds some light.

 

[alt20]

Hi Vragabond,

Thanks for replying. Unfortunately you're completely right about me being out of my depth somewhat. Unfortuntately I'm in a bit of a rush to get this done so didn't really have time to sit and learn about css.

I did what you said, and even commented out the:

div id="wrap"
div id="content"
div id="main-content"

statements at the bottom in an attempt to trace the problem, but nothing seemed to change.

I would be very grateful if you could have another look at it for me. Thankyou very much

Alt

 

[alt20]

Thanks everyone for their help.

Problem solved: don't use CSS

 

[Foamcow]

Nah, that's just a problem put off till later. ;-)

http://www.foamcow.com

 

[Vragabond]

I admit to being a little lazy today and not wanting to adhere to another incomprehensible IE quirk. The solution I gave you worked like a charm in my Mozilla but I noticed the horizontal scroll was still there in IE. Now, I would probably look for and cater to IE's problems, but I was really put off by the number of frames you use in your page. I hate frames altogether and seriously, there is only need for one iframe on your page at most. I admit that I stopped counting just how many frames you have. What I am saying is -- SIMPLIFY the code for your page. Try to avoid frames altogether, if it is not possible, use maximum three. You will easier find your way. Same with CSS. You are (were?) using two external sheet and one internal. Put everything into one. Check for duplicate entries. If you don't understand something, add borders to that element and look at where the element is rendered. There is a lot of code that can be done a lot simpler in your page and that decreases its readabilty and maintainability.