kbjradmin
New Member
- Messages
- 512
- Reaction score
- 2
- Points
- 0
ok, so i made this layout in css, and from what i can tell, it should be fluid, but its not. i don't understand why the whole page won't expand with the main content. here is the code:
index.php
style.css
background.css
please help!
index.php
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<?php include('config.php'); ?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!--Data Tags-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="en" />
<title><?php echo $pageTitle; ?></title>
<!--File Includes-->
<!--CSS Files-->
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="stylesheet" type="text/css" href="background.css" />
<!--Script Files-->
<script type="text/javascript" src="scripts/onPageLoad.js"></script>
<!--Other Files-->
<link rel="shortcut icon" href="media/favicon.ico" />
</head>
<body>
<div id="wrapper-background">
<!--Top-->
<div id="wb-top">
<div class="wb-left"></div>
<div class="wb-right"></div>
<div class="wb-center">
<div id="header">
<h1>Header</h1>
</div>
</div>
</div>
<!--Middle-->
<div id="wb-middle">
<div class="wb-left"></div>
<div class="wb-right"></div>
<div class="wb-center">
<div id="wrapper-content">
<div id="navagation">
</div>
<div id="main">
<div class="left">
<p style="text-align:center;">Main Left</p>
</div>
<div class="right">
<p style="text-align:center;">Main Right</p>
</div>
<div class="center">
<p style="text-align:center;">Main Center</p>
</div>
<div class="clear"></div>
</div>
</div>
</div>
</div>
<!--Bottom-->
<div id="wb-bottom">
<div class="wb-left"></div>
<div class="wb-right"></div>
<div class="wb-center">
<div id="footer">
<?php echo $footerCode; ?>
</div>
</div>
</div>
</div>
</body>
</html>style.css
Code:
@charset "utf-8";
*{
margin: 0 0 0 0;
padding: 0 0 0 0;
font-family: Comic Sans MS, Comic Sans MS5, cursive;
font-weight: 100;
}
a{
color: #3f9ce9;
text-decoration: none;
}
a:hover{
text-decoration: underline;
}
.clear{
clear: both;
}
body{
background-image: url('media/background.png');
background-position: left top;
background-attachment: scroll;
background-repeat: repeat-x;
background-color: #ffffff;
}
#wrapper-background{
width: 95%;
margin: 2em auto 2em auto;
position: relative;
min-height: 250px;
}
#header{
font-size: 20px;
}
#main .left{
float: left;
width: 15%;
}
#main .right{
float: right;
width: 15%;
}
#footer{
margin-top: 20px;
}
#footer .left{
float: left;
}
#footer .right{
float: right;
}background.css
Code:
@charset "utf-8";
/*
Top Row
*/
#wb-top .wb-left{
position: absolute;
top: 0px;
left: 0px;
background: url('media/top-left.png');
width: 50px;
height: 50px;
}
#wb-top .wb-right{
position: absolute;
top: 0px;
right: 0px;
background: url('media/top-right.png');
width: 50px;
height: 50px;
}
#wb-top .wb-center{
position: absolute;
top: 0px;
left: 50px;
right: 50px;
background: url('media/top.png');
height: 50px;
}
/*
Middle Row
*/
#wb-middle .wb-left{
position: absolute;
top: 50px;
left: 0px;
bottom: 50px;
background: url('media/left.png');
width: 50px;
}
#wb-middle .wb-right{
position: absolute;
top: 50px;
right: 0px;
bottom: 50px;
background: url('media/right.png');
width: 50px;
}
#wb-middle .wb-center{
position: absolute;
top: 50px;
right: 50px;
bottom: 50px;
left: 50px;
background-color: #ffffff;
}
/*
Bottom Row
*/
#wb-bottom .wb-left{
position: absolute;
bottom: 0px;
left: 0px;
background: url('media/bottom-left.png');
width: 50px;
height: 50px;
}
#wb-bottom .wb-right{
position: absolute;
bottom: 0px;
right: 0px;
background: url('media/bottom-right.png');
width: 50px;
height: 50px;
}
#wb-bottom .wb-center{
position: absolute;
bottom: 0px;
left: 50px;
right: 50px;
background: url('media/bottom.png');
height: 50px;
}please help!
