Forum Moderators: not2easy
they way i have it setup the site looks fine (still need to figure out how to put text in it and restrict it to a certain area) but when i take the browser window itself and shrink it i run into the problem where the stuff on the right overlaps the stuff on the left :(
here is a copy of my html and my css code
HTML::
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="stylesheet.css" rel="stylesheet" type="text/css" />
<title>Fitness Principles</title>
</head>
<body>
<div id="pageborder">
<div id="leftcolumn"></div>
<div id="centercolumn"> <a id="logo"> </div>
<div id="dividerbar"></div>
<div id="block1">hu</div>
<div id="block2"></div>
<div id="copyrightbar"></div>
<div id="rightcolumn"></div>
</div>
</body>
</html>
and the CSS
body {
font-family: Arial, Helvetica, sans-serif;
background-color: #FFFFFF;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
}div#pageborder {
width: 100%;
height: 100%;
}
#leftcolumn {
position: fixed;
float:left;
left: 0px;
width:100px;
height: 100%;
margin-left: 0px;
margin-top: 0px;
background-image:url(left outer bar.jpg);
background-repeat:repeat-y;
}
#centercolumn {
position: fixed;
left: 100px;
right: 100px;
margin-top: 0px;
margin-right: opx;
height: 100%;
background-color: #f8f6f6;
}
#logo {
position: fixed;
top: 0px;
width: 330px;
height: 114px;
background-image:url(lobo 3.jpg);
background-repeat:no-repeat;
}
#dividerbar {
position: fixed;
margin-left: 0px;
padding-left: 0px;
top: 114px;
left: 100px;
right: 100px;
height: 8px;
background-image: url(header body divider.jpg);
background-repeat: repeat-x;
}
#copyrightbar {
position: fixed;
margin-left: 0px;
padding-left: 0px;
bottom: 0px;
left: 100px;
right: 100px;
height: 56px;
background-image:url(copyright caption section.jpg);
background-repeat: repeat-x;
}
#block1 {
position: fixed;
top: 122px;
left: 100px;
bottom: 56px;
width: 100%;
height: 100%;
background-color: #ffffff;
}
#block2 {
position: fixed;
top: 122px;
right: 100px;
bottom: 56px;
width: 160px;
height: 100%;
background-color: #f7f6f6;
}
#rightcolumn {
position: fixed;
right: 0px;
width: 100px;
height: 100%;
background-image:url(right outer bar.jpg);
background-repeat:repeat-y;
}
however this posses a problem as block 1 is supposed to hold the content of the page whilst block 2 is supposed to hold a vertically listed menu so it would need to remain at a set width =\
