Forum Moderators: not2easy
I want to be able to define the layout of a page entirely in CSS. My basic theory is to use one CSS definition as a wrapper and nest all my other content inside of that wrapper.
Here is my code:
<style type="text/css">
<!--
body {
text-align: center; /* IE bug exploitation*/
}
#wrapper {
position:absolute;
text-align: left;
margin-left: 50%; /* centering trick */
left:-360; /* centering trick */
top:0;
width:720;
height:1000;
z-index:1;
font-size: 24px;
}
#banner {
position:absolute;
left:0;
top:20;
width:720;
height:240;
z-index:1;
border: thin dashed #000000;
}
#navigation {
position:absolute;
left:0;
top:260;
width:720;
height:40;
z-index:2;
border: thin dashed #000000;
}
#content {
position:absolute;
left:0;
top:300;
width:540;
height:700;
z-index:3;
border: thin dashed #000000;
}
#sidebar {
position:absolute;
left:540;
top:300px;
width:180;
height:700;
z-index:4;
border: thin dashed #000000;
}
-->
</style>
</head><body>
<div id="wrapper">
<div id="banner">banner</div>
<div id="navigation">navigation</div>
<div id="content">content</div>
<div id="sidebar">sidebar</div>
</div>
</body>
</html>
I've also tried using:
#wrapper {
margin-left: auto;
margin-right: auto;
}
Well the first example seems to center everything correctly but the page does not appear with the correct layout.
-----------------------
¦banner ¦
¦ ¦
¦ ¦
-----------------------
¦navigation ¦
-----------------------
¦content ¦sidebar¦
¦ ¦ ¦
¦ ¦ ¦
¦ ¦ ¦
¦ ¦ ¦
¦ ¦ ¦
¦ ¦ ¦
-----------------------
Something like that.
I've figured out how to do it with tables, but I would much rather be able to define the entire sites positioning with CSS. Is this even possible?
I also can't seem to get style codes to work =/... Sorry
<body>
<div id="wrapper">
...
</div>
</body>
In this example, the div with the id of "wrapper" is what we want to make centered and fixed width. Now for the CSS:
body
{
margin: 0;
padding: 0;
text-align: center;
}
#wrapper
{
margin: 0 auto;
border: 1px solid red;
padding: 0;
width: 720px;
text-align: left;
}
Then within your wrapper, just fill it in with your content. Hope that helps.
.display{
position: absolute;
left: 10%;
width: 80%;
border-style: solid;
border-width: 1px;
height: 111px;
}
This will create an area where you can put whatever you want. Change the height to meet your needs. Also, if you wish to change the width simply change the width percent, subtract that number from 100, divide that by two and you have your left parameter. I use 80% width and 10% left often, sometimes I use 60% width and 20% left. You can play with it to see what you like.
