Why is this code here?

Hello fellow coders.

I am puzzled. The style sheet attached was coded for me by another forum member. As part of my learning of CSS, I have been modifying the various parts to see what happens.

The part below in red does not seem to do anything. If I remove it or leave it in. Am I missing something here.

I would appreciate any help. The page works OK with or without it.

BUT why!

effpeetee

www.exitfegs.co.uk


body {
background-color: #000000;
font-family: Arial, Helvetica, sans-serif;
color: white;

}

#wrap {
width: 97px;
margin: auto;
}
a img {border: none;}
#header {position: relative;}
#header h1 {
color: red;
text-align: center;
}
#content {font-size: 12px;}
#intro {margin-top:20px;
color:yellow;
width: 180px;
float: left;
font-weight: bold;
}

#main {
float: right;
width:740px;
position:relative;

}
#main p {
clear: both;
width: auto; /* reverting the width set in #content p */
}
#main a img {border: 2px solid green;}
#main a:hover img {border-color: orange;}

#imgcaption {font-size: 15px;
text-align: center;
color:yellow;
font-weight: bold
}
.previewlink {}
.previewimage {
width: 680px;
float: left;
}

#links {
clear: left;
}
#links ul {
margin: 0;
padding: 0;
list-style: none;
}
#links ul a {font-size: 12px;
color: yellow;
font-weight: bold;
text-decoration: none;
}
#links ul a:hover {text-decoration: underline;}
#footer {
clear: both;
}

h1,h2 {font-family: Arial;}
h1 {color:red}
h2,h3 {color:cyan}
h6 {color:cyan}
h5,h5 {color:white}
h6,h5,h5,h3,h2,h1,p {
margin: 0;
}
#clockbox0{
position: absolute;
left: 1em;
color:white
}

#clockbox1{
position: absolute;
right: 1em;
color:white
}

#greet{color:red;
text-align:center}

p#pc {margin-top:86px;margin-left:10px;}


#pp{font-size:11px;
color: orange;
font-weight:bold;
text-decoration: none;
border:none
}

#pc{font-size:12px;
color: white;
font-weight:bold;
text-decoration: none;
border:none
}

#foot{font-size:14px;
color: yellow;
font-weight:bold;
text-decoration: none;
border:12px
}

I actually think it used to be
#wrap {
width:970px;
margin:auto;
}
What it does is center the layout and keeps it a width of 970px or 97px (which seems to be a mistake). If you add a background color to #wrap with its current 97px width you'll see that it doesn't contain your whole layout but the other divs are larger than 97px and have no place to go. #intro + #main = 970 btw. Without the #wrap CSS in place your layout will never center in the users browser. I also advise that you remove this line
<?xml version="1.0"?>
as its putting IE6 in quirksmode and will probably make your layout look broken in IE6 in the future.

I actually think it used to be
#wrap {
width:970px;
margin:auto;
}
What it does is center the layout and keeps it a width of 970px or 97px (which seems to be a mistake). If you add a background color to #wrap with its current 97px width you'll see that it doesn't contain your whole layout but the other divs are larger than 97px and have no place to go. #intro + #main = 970 btw. Without the #wrap CSS in place your layout will never center in the users browser. I also advise that you remove this line
<?xml version="1.0"?>
as its putting IE6 in quirksmode and will probably make your layout look broken in IE6 in the future.
Hello Aerospace Eng,

I altered the 970 to 97 to see what it would do. I have tried running the whole of my site with the #wrap code removed and using Firefox and IE7 there is no visible difference. Everything stays in the same place.

I will remove the code you suggest, and I will re-instate the #wrap code, but I would still like to know why it seems to be dorment.

I have been trying to get the index page so that there is no need to scroll sideways to see the whole picture. How can I do this.

Many thanks for your help and explanations.

effpeetee

www.exitfegs.co.uk

Its not dormant. It centers the layout. If you are on a 1024x768 resolution you aren't going to really see it center. Reduce the width of #main and reduce the width of #wrap to equal the width of #main + #intro. You will then see that it centers the layout. To not have a scrollbar you will need to follow the layout here http://bonrouge.com/2c-hf-fluid.php

Also for this to work you will need to set the width of the image in a percentage. Just be aware if you do this then you will end up with pixelated images on larger resolutions. You won't be able to get rid of the scrollbar if you keep the images at fixed size.

Also quit posting your link in every post you make. It seems like you are spamming. If you want to have your link on every post then put it in your signature under the user CP.

Thank you again, but I think I'll leave it the way it is.

Chicken, that's me!

effpeetee