CSS Forum

**Smudly** · 10-26-2010, 10:05 PM

Hi, I am currently creating the template for a website I am working on. When I resize the window, the Links and the top right image move out of place. I need these to stay in place no matter what size the window is or what resolution is using. What am I doing wrong?

Here's my code:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta name="description" content="Bed Bug & Dust Mite Services - Mattress Doctor">
<meta name="keywords" content="bed,bug,dust,mite,mattress,cleaning,service,doctor,saint,george,utah">
<meta name="author" content="Mattress Doctor - We clean mattresses to destroy and remove dust mites and bed bugs!">
<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1">
<title>Mattress Doctors</title>
<link rel="stylesheet" type="text/css" href="styles/style.css">
<style type="text/css">
#header{
    height: 130px;
    background:url(../img/header.gif);
    width: 100%;
}
#headleft{
    width: 40px;
    height: 130px;
    background:url(../img/header.gif);
    float: left;
}
#logo{
    width: 222px;
    height: 130px;
    text-align: center;
    position: relative;
    overflow: hidden;
}
#slogan{
    width: 602px;
    height: 130px;
    float: left;
}
#schedule{
    position: absolute;
    right: 0px;
    top: 20px;
    width: 200px;
    height: 130px;
    text-align: center;
    overflow: hidden;
}
#nav{
    position: absolute;
    top: 130px;
    width: 100%;
    height: 40px;
    background:url(../img/nav.gif);
    text-align: center;
}
#link{ 
    float: left;
}
#container{
    height: 600px;
    background:url(../img/bg.gif);
}
body{
    font-weight: bold;
    margin: 0px auto;
}
img{
    border: none;
}
</style>
</head>
<body bgcolor="#ffffff">

<!-- Header -->
<div id="header">
    <div id="headleft"></div>
    <div id="logo"><img src="img/logo.png" alt="Mattress Doctors"></div>
    <div id="slogan"></div>
    
    <div id="schedule">1-800-Bug-Free<br><a href="schedule.php"><img src="img/schedule.png" alt="Schedule Service"></a></div>
</div>

<!-- Nav -->
<div id="nav">
    <a href="home.php"><img src="img/home.gif"></a>
    <a href="problem.php"><img src="img/problem.gif"></a>
    <a href="solution.php"><img src="img/solution.gif"></a>
    <a href="process.php"><img src="img/process.gif"></a>
    <a href="faq.php"><img src="img/faq.gif"></a>
    <a href="contact.php"><img src="img/contact.gif"></a>
</div>

<!-- Content -->
<div id="container">




</div>

<!-- Footer -->
<div id="footer">


</div>



</body>
</html>

**edgray** · 10-27-2010, 07:10 AM

can you post a link so I can see it with the images linked in properly?

I notice you've got some absolute positioning in there - #schedule is absolutely positioned to always be 20px from the top and 0px from the right of the browser window, so that's where it will always be. If someone is looking on a really big screen, say a resolution of over 2000px, It'll still be right aligned, and miles away from your content.

If you want to maintain a fixed width, put a wrapper around your content, maybe 960px wide, and position #schedule inside that, to the right, that way it won't move over.

**LadynRed** · 10-27-2010, 07:17 AM

You really just need to get rid of the absolute positioning, it's really not necessary at all. It also causes problems with IE, so it's best to use it sparingly.

**Smudly** · 11:56 AM

Thanks, I got it working