How to centre site when forced to use float:left attribute? [SOLVED?]

[Charmie]

HI,

I have created my site using only DIV tags and css.
Can anyone tell me how to get a white background to this layout:
==========================
This tag contains all the elements of my site and I have set it's background to white #FFFFFF
     Banner elements here. again background set to white
     Top navigation

THe next three divs are in a row, inline:
    Left hand sub-level naivigation
    Main page content
    This contains ny news items and sit on the RHS, there is also an option for a LHS news box
    Copyright information

=========================
Styles are:

#container
{
float: none;
       position: relative;
background-color: #ffffff;
width: 900px;
margin: 0px auto;
        display: block;
}

#banner
{
padding:0px;
margin: 0 0 20px 0; /* margin-top, margin-right, margin-bottom, margin-left */
/* background:#fff url(images/banner.jpg) no-repeat right top; */
}

#topNav
{
position: relative;
float:right;
text-align: right;
color: #663399;
margin: 0px 15px 5px 0px; /* margin-top, margin-right, margin-bottom, margin-left */
background-color: #FFFFFF;
width: 98%;
height: 40px;
        display: inline;
}

#leftSide
{/* left column can contain either the side menu and news or both*/
position: relative;
float:left;
left: 0px;
margin-left: 15px;
width: 180px;
padding: 0;
overflow: hidden;
}

#content
{/* right column */
float: left;
position: relative;
left: 0px;
margin-left: 20px;
width: 420px;
background:  #FFF;
overflow: hidden;
padding-bottom:: 30px;
}

#newsRight
{/* right news column */
float: right;
margin-right: 40px; /* margin-top, margin-right, margin-bottom, margin-left */
margin-top: 20px;
        width: 170px;
overflow: hidden;
font-size: 9px;
font-weight: normal;
color: #663399;
background-color: #CC99FF ;
padding: 5px 5px 5px 10px; /* padding-top, padding-right, padding-bottom, padding-left */
}

#copyright
{
        display: block;
       text-align: right;
font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
        background-color: #FFFFFF;
padding: 5px;
font-size:9pt;
color:#aaa;
line-height:120%;
word-spacing:1px;
border-top:1px solid #ddd;
        width: 95%;
        position:relative;
        float: left;
}

It seems the does not stretch down to enclosed any of the divs that have a float atrribute.
My site can be seen here:
www.christchurchnorthfinchley.co.uk

Thanks

[Charmie]

Hi all,

Almost solved this, made the following change to the container div, which holds all the page divs.
Removed Position: relative;
and changed the
float: none;
to float: left;

This has allowed the background of site to be white and all columns to extend with any amount of data in any of the columns.
My only thing is the site is now left-aligned.

Anyone know how to make this centred?
I would rather not add a left-margin attribute but if this is the only way then I guess I will have to.

Thanks

[Nullig]

I see a couple of problems:

1. The root url is wrong in your config.php file. It should be:

$config['root_url'] = '<base href="http://www.christchurchnorthfinchley.co.uk';

not

$config['root_url'] = '<base href="http://www.christchurchnorthfinchley.co.uk/';

2. You have an extra div "page", which has no styling.

3. You have 2 similar ids "content" and "Content", which can be confusing.

Nullig

[Charmie]

Hi Nullig,

Thanks for the advice, that extra front slash was causing problems with file and picture locations.
I have removed that extra page div and the Content div.

Thanks.
Any idea on how to get the site centred on page?

Charmie

[RonnyK]

The

margin: 0 auto;

should do the trick.....

Ronny

[uniqu3]

Hi,

to center your container remove the float:left; and set margin:auto;
You dont need an extra ID for body, simply use body{your style here; }

If you have problems with floating elements you should use clear:both; (name some class .clearer{clear:both;} after the floating element.

[KO]

for the #content to extend/stretch vertically try adding

overflow:auto

when removing float:left

try this with other browsers as sometimes IE7 gives you some trouble.

[Charmie]

WOW...

Thanks guys for all the help, it seems to have worked...I will have to test with IE tomorrow as right now am on Mac using FF and Safari and they both look great...

Charmie