HTML Help

Ruriko · Joined: 16 Mar 2006 Posts: 18

This is my layout http://www.omganime.info you notice the layout isn't horizontal centered. How can I fix this?

Code: @charset "utf-8";
/* CSS Document */

body {
margin-top: 0px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}

#wrapper {
margin-right: auto;
margin-left: auto;
width: 1000px;
background-color: #FFFFC9;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-right-color: #FF0000;
border-bottom-color: #FF0000;
border-left-color: #FF0000;
float: left;
}

#top {
background-image: url(images/top.jpg);
height: 57px;
width: 1000px;
}

#header {
background-image: url(images/header.jpg);
height: 210px;
width: 1000px;
}

#bar {
background-image: url(images/bar.jpg);
background-repeat: repeat-x;
height: 30px;
width: 1000px;

}

#banner {
height: 100px;
width: 980px;
border: 1px dotted #FF0000;
margin: 10px;
background-color: #FFFFFF;
}

#content {
border: 1px dotted #FF0000;
height: 300px;
width: 550px;
background-color: #FFFFFF;
float: left;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 10px;
}

#sidebar {
height: 300px;
width: 410px;
border: 1px dotted #FF0000;
background-color: #FFFFFF;
float: right;
margin-right: 10px;
margin-bottom: 10px;
}

#left {
height: 300px;
width: 200px;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #FF0000;
float: left;

}

#right {
height: 300px;
width: 200px;
background-color: #666666;
float: right;

}

#footer {
background-color: #FF0000;
height: 30px;
width: 1000px;
float: left;

}

PayneLess Designs · Joined: 28 Feb 2007 Posts: 1402 Location: Biloxi, MS

Wow, are people with small browser windows not gonna like your page. :) Way too wide, but it did look centered to me in Firefox, ver 2.0.0.16..

You can just do this:
Code:
#wrapper {
margin: 0 auto;
width: 1000px;

Would set page width to something everyone can view without the browser kicking in an horizontal scroll bar.

Keep up the no coding errors. Looking good.