1. Home
  2. Forums Index
  3. Browser Side / CSS 5:16 pm May 1, 2026

Forum Moderators: not2easy

Message Too Old, No Replies

CSS Centre Entire Site

         

cryptotheslow

10:51 pm on Mar 20, 2010 (gmt 0)

10+ Year Member



Hi,

I'm fairly new to CSS and new to this site so please be gentle :)

I am trying to get my site to centre within the visible canvas and have ended up tying myself in knots for days.

I've followed other threads on here (as well as lots of other sites) and tried all the suggestions to no avail.

I have all the content in various divs held within one overall 'container' div. Quite a simple layout:

>container
>>content-header
>>content-container
>>>content-leftnav
>>>content-centre
>>>content-right
>>footer

Basically, 3 columns with header and footer.

I'm not sure how much of the css to post up so I'll start small: 

body
{
background: #000000;
text-align:center; /* for IE */
}
#container
{
text-align:left;
width: 1000px;
margin: 0 auto; /* for the rest */
background: #000000;
}


All other divs are held within "container" but it seems that "container" itself is not centred.

The other issue I have is on higher resolution screens, I can't keep the footer div under the rest of the content divs - it jumps up to the right of the main content.

Currently for that I have: 

#footer {
clear: left;
background: #000000;
text-align: center;
}


I have tried clear: both as well but the same happens.

How do I keep it at the bottom?

Many thanks,
Graham

mack

11:18 pm on Mar 20, 2010 (gmt 0)

WebmasterWorld Administrator 10+ Year Member Top Contributors Of The Month



Have you tried...
margin:auto;

This will mean the margin to either side of the container will be exactly the same.

Sometimes margin: 0 auto; causes problems under Internet Explorer. Also have you specified the doctype at the top of your HTML file?

Mack.

cryptotheslow

12:23 am on Mar 21, 2010 (gmt 0)

10+ Year Member



I will try that.

And yes doctype is specified as: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">


Both CSS and HTML pass against the W3C validators.

drhowarddrfine

1:52 am on Mar 21, 2010 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



You don't show enough markup for us to help.

cryptotheslow

2:30 am on Mar 21, 2010 (gmt 0)

10+ Year Member




I just spotted something quite odd.

I have a page on the site that displays just fine regardless of screen resolution. The difference is that page is a PHP file with the CSS contained within it.

So I copied across the various div attributes from the php file into the stylesheet for the html page I am struggling with and then took a look at them with Firebug.

Just concentrating on the header section to start with...

For the php file:
<div id="header">

For the html file + stylesheet:
<div id="header" style="display: inline;">


I then went back and added.. display: static; to the stylesheet for the header in the html page and it still shows as "display: inline" in Firebug.

That probably explains the footer not staying in place anyway.

I'm going to put my css back into the html file and see if that helps.

How much markup do you want?

drhowarddrfine

10:58 am on Mar 21, 2010 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



From doctype to last line. All of it including the CSS.

cryptotheslow

5:48 pm on Mar 21, 2010 (gmt 0)

10+ Year Member



OK.. I have to admit this is somewhat embarrassing :-/

I scrapped the lot and built the page back up from scratch adding the content back in bit by bit until it broke.

Finally tracked it down to this line of code lurking in an included javascript snippet: 

 $('div').css("display", "inline");


Which was basically overriding the css in the page. Took that out and all is now displaying fine in all browsers.

The end result: 


body {
  background-color: #000000;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  color: #FF0000;
  font-size: 12px;
  text-align:center; /* for IE */
}
#header {
  background-color: #000000;
  width: 100%;
  height: auto;
  text-align: center;
}
#content-container {
  background-color: #000000;
  width: 1000px;
  height: auto;
  margin: 0 auto; /* for the rest */
}
#content-left {
  background-color: #000000;
  padding-top: 80px;
  float: left;
  width: 20%;
  height: auto;
  line-height: 0;
  text-align: center;
}
#content-centre {
  background-color: #000000;
  padding-top: 40px;
  padding-bottom: 80px;
  float: left;
  width: 45%;
  height: auto;
  text-align: left;
}
#content-right {
background-color: #000000;
padding-top: 55px;
padding-bottom: 80px;
float: left;
width: 35%;
height: auto;
text-align: left;
}
#footer {
  background-color: #000000;
  clear: both;
  width: 100%;
  height: auto;
  text-align: center
}


Thanks for everyone's help :)

mack

7:12 pm on Mar 21, 2010 (gmt 0)

WebmasterWorld Administrator 10+ Year Member Top Contributors Of The Month



Good find, glad you where able to resolve the issue. Its little things like that that can lead us round in circles looking for answers.

Mack.

cryptotheslow

7:49 pm on Mar 21, 2010 (gmt 0)

10+ Year Member




You're not wrong, I spent literally days on that, reconstructing the stylesheet over and over.

Lesson learnt - if in doubt, go back to basics, strip out all the content, construct the layout so it looks right... only then start adding the content back in.

I'll know better than to make assumptions next time :)

Thanks
Graham
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / CSS 5:16 pm May 1, 2026