http://eatrealnyc.org/eatrealnyc/index.html
view-source:http://eatrealnyc.org/eatrealnyc/index.html
http://eatrealnyc.org/eatrealnyc/style.css
if you look at the source and css can you tell me how I might be able to move the website to the center of the page or at least close… its not div align=center lol
You can’t. Not as long as you are using position:absolute - which is not necessary for this design.
I put together a very basic example for you of how you can accomplish this design using basic floats.
<style type="text/css">
<!--
#container {
background-color: #7cc576;
height: 426px;
margin: 0 auto;
width: 1080px;
}
#cols {
overflow: hidden;
}
#cols .col {
float: left;
height: 550px;
}
#cols #left {
background-color: #00bff3;
width: 317px;
}
#cols #center {
background-color: #448ccb;
width: 544px;
}
#cols #right {
background-color: #605ca8;
width: 219px;
}
#footer {
background-color: #f68e56;
}
//-->
</style>
<div id="container">
<div id="header">
Header
</div>
<div id="cols">
<div class="col" id="left">Left Column</div>
<div class="col" id="center">Center Column</div>
<div class="col" id="right">Right Column</div>
</div>
<div id="footer">Footer</div>
</div>The background colors are added just to show the different blocks. To center this design, I used the code ‘margin:0 auto’ on the container div. Feel free to ask any questions
Oops I had an error in that CSS. I meant to specify the height for the header, not the container. Fix:
<style type="text/css">
<!--
#container {
background-color: #7cc576;
margin: 0 auto;
width: 1080px;
}
#header {
height: 426px;
}
#cols {
overflow: hidden;
}
#cols .col {
float: left;
height: 550px;
}
#cols #left {
background-color: #00bff3;
width: 317px;
}
#cols #center {
background-color: #448ccb;
width: 544px;
}
#cols #right {
background-color: #605ca8;
width: 219px;
}
#footer {
background-color: #f68e56;
}
//-->
</style>thanks … I’ll go back and fix my code later to get this up to correct coding shape. 