I have a website completed but I am having an issue. I have a sidebar with links to other pages on the left side of the screen in green. the rest of the content is to right of the sidebar in yellow. The problem I’m having is that the site looks fine on my screen but, of I view the site in a larger or small resolution the text and other content is shifted into the green of the sidebar. I have the width of the body set to 100%. I am unsure what the problem is.
CSS:
body
{
background-image:url(Images/testbackground.jpg);
width:100%
}
#Links
{
float: left;
width: 10%;
margin: 0;
padding: 0;
height: 200px;
}
#ContentLayout
{
clear: right;
float: right;
width: 80%;
font-size:18px;
}
#wrapper
{
margin: 0 auto;
width:100%;
}
HTML:
<body>
<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" media="all" href="OldHome.css" />
<![endif]-->
<div id="wrapper">
<img src="Images/logo.jpg" name="Logo" id="Logo" />
<div id="Links">
<a href="index.html"><img src="Images/HomeLogo.jpg" alt="home" border="0px" /></a>
<br />
<a href="Programs.html"><img src="Images/ProgramsLogo.jpg" alt="programs" border="0px" /></a>
<br />
<a href ="Services.html"><img src="Images/ServicesLogo.jpg" alt="services" border="0px" /></a>
<br />
<a href ="Contact.html"><img src="Images/ContactLogo.jpg" alt="contact" border="0px" /></a>
<br />
<a href ="OtherLinks.html"><img src="Images/OtherLinksLogo.jpg" alt="links" border="0px" /></a>
<br />
<a href ="FAQ.html"><img src="Images/FAQLogo.jpg" alt="faq" border="0px" /></a>
<br />
<a href="Feedback.html"><img src="Images/FeedBackLogo.JPG" alt="feedback" border="0px" /></a>
<br />
<a href="Photos.html"><img src="Images/PhotosLogo.JPG" alt="photos" border="0px" /></a>
</div>
<div id="header">
<h1><center>
<u>Home</u>
<p><img src="Images/OutsideBld2.jpg" width="600" height="500" /></p>
</center></h1>
</div>
<div id="ContentLayout">
<h3 style="padding-left:30px"><center>Mission Statement</center></h3>
<p id="MissionStatement">The Employment Preparation Centre offers employment assistance programs and services to clients at no charge. These are available on a one-on-one basis or in group settings.
Programs and services at The Employment Preparation Centre are based on a belief that a person’s employability is enhanced through self-assessment, knowledge of the current labour market, and development of a return-to-work action plan.</p>
<p id="MissionStatement">
Programs and services at The Employment Preparation Centre are funded through the Department of Advanced Education and Skills under several key divisions.
</p>
<br />
<br />
<p>Trouble finding us?</p>
<!-- Google map START -->
<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=10+Main+Street,+Corner+Brook&aq=&sll=39.017445,-98.196116&sspn=35.694805,86.044922&ie=UTF8&hq=&hnear=10+Main+St,+Corner+Brook,+Division+No.+5,+Newfoundland+and+Labrador+A2H+1C6,+Canada&t=m&z=14&ll=48.951917,-57.947721&output=embed"></iframe><br /><small><a href="http://maps.google.com/maps?f=q&source=embed&hl=en&geocode=&q=10+Main+Street,+Corner+Brook&aq=&sll=39.017445,-98.196116&sspn=35.694805,86.044922&ie=UTF8&hq=&hnear=10+Main+St,+Corner+Brook,+Division+No.+5,+Newfoundland+and+Labrador+A2H+1C6,+Canada&t=m&z=14&ll=48.951917,-57.947721" style="color:#0000FF;text-align:left">View Larger Map</a></small>
<!-- Google map END -->
<p>This page has <span><?=$hits;?></span> hits</p>
<address>
© 2012
</address>
</div>
</div>
<script type="text/javascript">
var $buoop = {}
$buoop.ol = window.onload;
window.onload=function(){
if ($buoop.ol) $buoop.ol();
var e = document.createElement("script");
e.setAttribute("type", "text/javascript");
e.setAttribute("src", "http://browser-update.org/update.js");
document.body.appendChild(e);
}
</script>
</body>
</html>
Make sure the position on you areas and text is set to absolute?