CSS Centered Layout PDF Print E-mail

centerThis tutorial shows you how to get a fixed-based CSS layout CENTERED. There are actually several ways to accomplish this, in this one we are using simple text-align and margin styles to get what we want in IE and Firefox.

click here to watch

Below is the corresponding HTML:

 

Below is the corresponding CSS:

body {
background-color: #144E56;
text-align: center;
margin: 0 auto;
}

#header {
text-align: left;
width: 773px;
height: 150px;
margin: 0 auto;
background-color: #144e56;
background-image: url(../images/header.jpg);
border-top: 4px #FFFFFF solid;
border-left: 4px #FFFFFF solid;
border-right: 4px #FFFFFF solid;
background-repeat: no-repeat;
}

#searchbar {
width: 198px;
height: 37px;
background-color: #656565;
margin-top: 113px;
text-align: center;
}

#container {
width: 773px;
border: 4px #FFFFFF solid;
background: #ffffff url(../images/leftbg.gif) repeat-y;
margin: 0 auto;
}

#left {
text-align: left;
width: 198px;
padding-top: 20px;
margin: auto 0;
float: left;
}

#right {
margin-left: 198px;
background-color: #FFFFFF;
text-align: left;
margin-top: 0px;
width: 570px;}

#newsflash {
text-align: center;
margin-top: 20px;
float: left;}

.newsflashContainer {
width: 160px;
text-align: left;
margin-left: 25px;
padding-bottom: 10px;
}

#latestnews {
text-align: center;
margin-top: 2px;
float: left;}

#login {
text-align: center;
margin-top: 2px;
float: left;}

#footer {
clear: both;
width: 773px;
height: 46px;
background-color: #656565;
}

#footerLeft {
height: 46px;
width: 198px;
background-color: #2F363C;
text-align: center;
float: left;
}

#footerRight {
text-align: center;
width: 550px;
height: 30px;
padding-top: 12px;
}







Tags:  center layout css firefox ie

 
Tag it:
Delicious
digg
Ma.gnolia
Contact Information