css layout problem

[biz82]

Hi I am new to this forum and I am creating my first website. I have created my html and css documents but am having a problem with how the webpage is being displayed. It displays as I want full screen until I minimize or change the window size of the browser and then the elements lose their position and overlap eachother. I am not sure if I have coded the positioning properties correctly so any help would be keenly appreciated. You will probably see many errors as this is my first attempt at creating a website. Thanks.

body {
background-color: #05316d;
margin:0;
padding:0;
}

#header1 {
position: relative; top: 0px; left: 60px;
width: 100%;
font-family:"Comic Sans MS", cursive, sans-serif;
font-size: 2em;
text-align: left;
color: #876ed7;}

#header2 {
position: absolute; top: 100px; left: 100px;
width: 100%;
font-family: "Comic Sans MS", cursive, sans-serif;
font-size: 1em;
text-align: left;
color: #876ed7;}

#header3 {
position: absolute; top: 0px; left: 400px;
width: 100%;
font-family: "Comic Sans MS", cursive, sans-serif;
font-size: 1.5em;
text-align: center;
color: #876ed7;}

#navigation
ul
{
list-style-type:none;
margin:1em;
padding:1em;
overflow:hidden;
}
#navigation
li
{
float:left;
}
#navigation
{
position: absolute; top: 130px;
}
#navigation
a:link,a:visited
{
display:block;
width:290px;height: 40px;
font-family: "Comic Sans MS", cursive, sans-serif;
text-align:center;
font-weight:bold;
color:#00092c;
background-color:#876ed7;
text-align:center;
padding: 0em;
text-decoration:none;
text-transform:uppercase;
}
#navigation
a:hover,a:active
{
background-color:#435395;
}

#content
{
display: block;
position: absolute; top: 220px; left: 60px;
width: 500px;
line-height: 1em;
font-family: Tahoma, Geneva, sans-serif;
font-size: 1em;
text-align: left;
color: #00092C;
background-color: #876ed7;
padding: 5px;
}

#facilities
ul{
list-style-type: square;
list-style-position:inside;
position: absolute; top: 204px; left: 572px;
width: 325px;
line-height: 1em;
font-family: Tahoma, Geneva, sans-serif;
font-size: 1em;
color: #00092C;
background-color: #876ed7;
padding: 5px;
}

#picture1{
display:block;
position:absolute;
right:166px;
top:220px;
border:10px solid #435395;
width:250px;
height:180px;
}

#picture2{
display:block;
position:absolute;
right:166px;
top:430px;
border:10px solid #435395;
width:250px;
height:180px;
}

#picture3{
display:block;
position:absolute;
right:438px;
top:590px;
border:5px solid #435395;
width:70px;
height:30px;
}

[teedoff]

Your over use of position absolute is whats giving you trouble. You should consider using floats with margins and paddings to position most elements.

Do you have a link to your site?

[scottloway]

Yes, please provide a link to your page, or post your HTML code as well - CSS alone isn't enough to diagnose.

That said, I agree with teedoff that floats may be a better approach.

[sagive]

i think teedoff is right.. you should really use divs which you have defind with height and width to create virtual borders and then use margin-left / right and float attributes to position elements