So I am working on learning how to make sites in CSS, and not tables. I hear thats the new cool thing to do!
Anyway, this is my code I made,
Code:
<head>
<title></title>
<style type="text/css">
<!--
#centered {
position: relative;
top: 50%;
left: 50%;
margin-top: -25%;
margin-left: -25%;
background-color: red;
color: white;
}
#header {
background: green;
position: absolute;
top: 0px;
left: 0px;
width: 800px;
height: 100px;
}
#leftcol {
background: black;
position: absolute;
top: 100px;
left: 0px;
width: 150px;
height: 500px;
}
#rightcol {
background: blue;
position: absolute;
top: 100px;
right: 887px;
width: 150px;
height: 500 px;
}
#content {
background: red;
position: absolute;
top: 100px;
left: 150px;
width: 500px;
height: 500px;
}
#footer {
background: green;
position: absolute;
top: 500px;
left: 0px;
width: 800px;
height: 100px;
}
-->
</style>
</head>
<body><div id="centered">
<div id="header">Header Section</div>
<div id="leftcol">Left Section</div>
<div id="rightcol">Right Section</div>
<div id="content">Content Section</div>
<div id="footer">Footer Section</div>
</div>
</body>
</html>
Very simple. But for some reason, when I get everything centered, my page just keeps on going. And I get this crazy amount of extra space to the right. Then when I take away the centered thing, my blue box on the right vanishes.
What am I doing wrong?
Thanks....
Last edited by bdg1115; 05-14-2010 at 03:16 PM..
|
