CSS height and width problems

[andyjamesnelson]

Hey I was wondering if anyone can help me with an issue i am having with height and width.

http://andyjamesnelson.co.uk/beatabet/

If you can take a look at the this page and then the source / the css is embedded for the mo.

For some reason I am getting horizontal and vertical scroll bars that seem to long?

Why is this? What am I missing out or doing wrong with my code?

Thanks, Andy

 

[angelwatt]

The horizontal part of it is due to a negative right value.

#contact p {
...
	position:relative; [B]right:-350px[/B]; top:110px;
}

The vertical part is due to setting the height so long and a top setting.

#rightcol {
...
	position:relative;[B] top:-726px[/B];
}

You'll need to work out better ways to layout the page than what you have so you don't get those extra scroll regions.

 

[andyjamesnelson]

ok but why? I really dont get why at all...



andy

 

[angelwatt]

ok but why? I really dont get why at all...



andy

To quickly see what's up, put

outline: 1px solid #f00; /*( very handy for debugging )*/

on a few of your elements to see how far they are reaching. It's essentially a result of the box model being misused. When using properties like 'top' and 'right' it doesn't do quite what you think it's doing. I suggest reading up on the box model if you want a more detailed understanding.

 

[andyjamesnelson]

ok cool i will try that - thanks for the tips.

For some reason when I read about css I feel like I understand it and then when it comes to the actual implementation of layout I'm like what the hell...

More practice I guess.

Andy

 

[andyjamesnelson]

ok thanks I sorted the problem - the outline trick is really useful for seeing how my contact paragraph had inherited width. and the height problem was due to my use of the relative position leaving an empty space at the bottom of the screen.

thanks, again. andy

 

[angelwatt]

ok thanks I sorted the problem - the outline trick is really useful for seeing how my contact paragraph had inherited width. and the height problem was due to my use of the relative position leaving an empty space at the bottom of the screen.

thanks, again. andy

Glad you figured it out. Outlining really is useful for layout issues. CSS is very simple on first appearance, and is actually easy to implement for the basic stuff. It's not until you start constructed more fanciful layouts that the "art" of CSS becomes more apparent.

 

[design-is]

Just a helpful hint... if you use Firefox, a good add-on called 'developer' has a lot of useful built in functions, such as outlining your block level elements, divs, etc, etc.

If you want to have a look, its at https://addons.mozilla.org/en-US/firefox/addon/60