css problem, resizing window

[hkazami]

I'm a beginner and have been editing an existing css file from school and I made padding so that the screen is sort of centred in the middle and spaces to the left and right.

Problem is, when I maximise it, you see it just fine, but when you restore the window, the left empty space is still on the screen. But many sites make it so that when you restore the window or resize it, the spaces are gone and what's left is the centred content.

Anybody know the resolution? Thanksss.

And when you resize the window, my contents are going everywhere - overlapping each other and such; totally unreadable.

[Setek]

Problem is, when I maximise it, you see it just fine, but when you restore the window, the left empty space is still on the screen. But many sites make it so that when you restore the window or resize it, the spaces are gone and what's left is the centred content.

This isn't done by pushing padding as an absolute value (read: pixel) to make it look right on some people's monitors or at some people's resolutions, they do it using auto margins.

1. You need a full and correct doctype, without any characters above it in the document (IE will be pushed into quirks mode otherwise);
   
2. You need a fixed-width container; and
   
3. Use

   margin: 0 auto;

   to automatically adjust the left and right margins to suit how wide the viewport is (with 0 as the top and bottom margins.)

And when you resize the window, my contents are going everywhere - overlapping each other and such; totally unreadable.

You'll have to post some code about that, but my guess is it's because you have absolutely positioned elements going awry, since they're overlapping.

[hkazami]

Thanks and here is the code:

================ Start code ==================
BODY {
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
PADDING-BOTTOM: 0px;
MARGIN: 0px;
COLOR: #333333;
LINE-HEIGHT: 1.166;
PADDING-TOP: 0px;
FONT-FAMILY: Arial,sans-serif
}

A:link {
COLOR: #006699;
TEXT-DECORATION: none
}

A:visited {
COLOR: #006699;
TEXT-DECORATION: none
}

A:hover {
COLOR: #006699;
TEXT-DECORATION: none
}

A:hover {
TEXT-DECORATION: underline
}

H1 {
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
PADDING-BOTTOM: 0px;
MARGIN: 0px;
PADDING-TOP: 0px;
FONT-FAMILY: Arial,sans-serif
}

H2 {
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
PADDING-BOTTOM: 0px;
MARGIN: 0px;
PADDING-TOP: 0px;
FONT-FAMILY: Arial,sans-serif
}

H3 {
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
PADDING-BOTTOM: 0px;
MARGIN: 0px;
PADDING-TOP: 0px;
FONT-FAMILY: Arial,sans-serif
}

H4 {
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
PADDING-BOTTOM: 0px;
MARGIN: 0px; PADDING-TOP: 0px;
FONT-FAMILY: Arial,sans-serif
}

H5 {
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
PADDING-BOTTOM: 0px;
MARGIN: 0px;
PADDING-TOP: 0px;
FONT-FAMILY: Arial,sans-serif
}

H6 {
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
PADDING-BOTTOM: 0px;
MARGIN: 0px;
PADDING-TOP: 0px;
FONT-FAMILY: Arial,sans-serif
}

H1 {
FONT-SIZE: 120%;
COLOR: #334d55;
FONT-FAMILY: Verdana,Arial,sans-serif
}

H2 {
FONT-SIZE: 114%;
COLOR: #006699
}

H3 {
FONT-SIZE: 100%;
COLOR: #334d55
}

H4 {
FONT-WEIGHT: normal;
FONT-SIZE: 100%;
COLOR: #333333
}

H5 {
FONT-SIZE: 100%;
COLOR: #334d55
}

UL {
LIST-STYLE-TYPE: square
}

UL UL {
LIST-STYLE-TYPE: disc
}

UL UL UL {
LIST-STYLE-TYPE: none
}

LABEL {
FONT: bold 100% Arial,sans-serif;
COLOR: #334d55
}

#masthead {
PADDING-RIGHT: 0px;
PADDING-LEFT: 215px;
PADDING-BOTTOM: 10px;
MARGIN: 0px;
WIDTH: 80%;
PADDING-TOP: 20px;
BORDER-BOTTOM: #cccccc 0px solid

}

#navBar {
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
PADDING-BOTTOM: 0px;
MARGIN: 0px 72% 0px 220px;
BORDER-LEFT: #eeeeee 0px solid;
PADDING-TOP: 0px;
BORDER-BOTTOM: #cccccc 1px solid;
BACKGROUND-COLOR: #ffffff
}

#content {
PADDING-RIGHT: 6%;
PADDING-LEFT: 0px;
FLOAT: right;
PADDING-BOTTOM: 0px;
MARGIN: 0px;
WIDTH: 63%;
PADDING-TOP: 0px
}

#siteName {
PADDING-RIGHT: 0px;
PADDING-LEFT: 10px;
PADDING-BOTTOM: 10px;
MARGIN: 0px;
PADDING-TOP: 0px
}

#pageName {
PADDING-RIGHT: 0px;
PADDING-LEFT: 10px;
PADDING-BOTTOM: 10px;
PADDING-TOP: 0px
}

#globalNav {
PADDING-RIGHT: 0px;
PADDING-LEFT: 10px;
PADDING-BOTTOM: 0px;
COLOR: #cccccc;
PADDING-TOP: 0px;
WHITE-SPACE: nowrap
}

#globalNav IMG {
DISPLAY: block
}

#globalNav A {
PADDING-RIGHT: 4px;
PADDING-LEFT: 0px;
FONT-SIZE: 90%;
PADDING-BOTTOM: 0px;
PADDING-TOP: 0px
}

#breadCrumb {
PADDING-RIGHT: 0px;
PADDING-LEFT: 10px;
FONT-SIZE: 80%;
PADDING-BOTTOM: 5px;
PADDING-TOP: 5px
}

.feature {
PADDING-RIGHT: 0px;
PADDING-LEFT: 10px;
FONT-SIZE: 80%;
PADDING-BOTTOM: 10px;
PADDING-TOP: 0px
}

.feature H3 {
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
PADDING-BOTTOM: 5px;
PADDING-TOP: 30px;
TEXT-ALIGN: center
}

.feature IMG {
PADDING-RIGHT: 10px;
PADDING-LEFT: 0px;
FLOAT: left;
PADDING-BOTTOM: 0px;
MARGIN: 0px 5px 5px 0px;
PADDING-TOP: 0px
}

.story {
CLEAR: both;
PADDING-RIGHT: 0px;
PADDING-LEFT: 10px;
FONT-SIZE: 80%;
PADDING-BOTTOM: 0px;
PADDING-TOP: 10px
}

.story P {
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
PADDING-BOTTOM: 10px;
PADDING-TOP: 0px
}

#siteInfo {
CLEAR: both;
BORDER-RIGHT: #ffffff 0px solid;
PADDING-RIGHT: 10px;
BORDER-TOP: #ffffff 0px solid;
MARGIN-TOP: 0px;
PADDING-LEFT: 10px;
FONT-SIZE: 75%;
PADDING-BOTTOM: 10px;
BORDER-LEFT: #ffffff 0px solid;
COLOR: #cccccc;
PADDING-TOP: 10px;
BORDER-BOTTOM: #ffffff 0px solid
}

#siteInfo IMG {
PADDING-RIGHT: 4px;
PADDING-LEFT: 0px;
PADDING-BOTTOM: 4px;
VERTICAL-ALIGN: middle;
PADDING-TOP: 4px
}

#search {
PADDING-RIGHT: 0px;
PADDING-LEFT: 10px;
FONT-SIZE: 90%;
PADDING-BOTTOM: 5px;
PADDING-TOP: 5px;
BORDER-BOTTOM: #cccccc 1px solid
}

#search FORM {
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
PADDING-BOTTOM: 0px;
MARGIN: 0px;
PADDING-TOP: 0px
}

#search LABEL {
PADDING-RIGHT: 0px;
DISPLAY: block;
PADDING-LEFT: 0px;
PADDING-BOTTOM: 0px;
MARGIN: 0px; PADDING-TOP: 0px
}

#navBar UL A:link {
DISPLAY: block
}

#navBar UL A:visited {
DISPLAY: block
}

#navBar UL {
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
PADDING-BOTTOM: 0px;
MARGIN: 0px;
PADDING-TOP: 0px;
LIST-STYLE-TYPE: none
}

#navBar LI {
BORDER-BOTTOM: #eee 1px solid
}

UNKNOWN {
BORDER-BOTTOM-STYLE: none
}

#sectionLinks {
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
FONT-SIZE: 90%;
PADDING-BOTTOM: 0px;
MARGIN: 0px; PADDING-TOP: 0px;
BORDER-BOTTOM: #cccccc 1px solid;
POSITION: relative
}

#sectionLinks H3 {
PADDING-RIGHT: 0px;
PADDING-LEFT: 10px;
PADDING-BOTTOM: 2px;
PADDING-TOP: 10px
}

#sectionLinks A:link {
PADDING-RIGHT: 0px;
BORDER-TOP: #cccccc 1px solid;
PADDING-LEFT: 10px;
PADDING-BOTTOM: 2px;
WIDTH: auto;
PADDING-TOP: 2px;
voice-family: inherit
}

#sectionLinks A:visited {
PADDING-RIGHT: 0px;
BORDER-TOP: #cccccc 1px solid;
PADDING-LEFT: 10px;
PADDING-BOTTOM: 2px; PADDING-TOP: 2px
}

#sectionLinks A:hover {
PADDING-RIGHT: 0px;
BORDER-TOP: #cccccc 1px solid;
PADDING-LEFT: 10px;
PADDING-BOTTOM: 2px;
PADDING-TOP: 2px;
BACKGROUND-COLOR: #dddddd
}

.relatedLinks {
PADDING-RIGHT: 0px;
PADDING-LEFT: 10px;
FONT-SIZE: 90%;
PADDING-BOTTOM: 10px;
MARGIN: 0px; PADDING-TOP: 0px
}

.relatedLinks H3 {
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
PADDING-BOTTOM: 2px;
PADDING-TOP: 10px
}

.relatedLinks A:hover {
BACKGROUND-COLOR: #dddddd
}

#advert {
PADDING-RIGHT: 0px;
BORDER-TOP: #cccccc 1px solid;
PADDING-LEFT: 10px;
FONT-SIZE: 80%;
PADDING-BOTTOM: 0px;
PADDING-TOP: 10px
}

#advert IMG {
DISPLAY: block
}

#headlines {
PADDING-RIGHT: 0px;
PADDING-LEFT: 10px;
FONT-SIZE: 80%;
PADDING-BOTTOM: 20px;
MARGIN: 0px;
PADDING-TOP: 10px
}

#headlines P {
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
PADDING-BOTTOM: 5px;
PADDING-TOP: 5px
}
================ End code ==================

[sobesama]

(I'm a new member here... just signed up.)
Keep in mind that to clean up CSS, you can compact rules and then specify differences. For example, instead of:

padding-top:0px;
padding-bottom:0px;
padding-left:10px;
padding-right:0px;

, use:

padding:0px;
padding-left:10px;

I suppose there's no real reason for this, but it helps keep your file sizes down if you can compact your code.