How to center this?

[webnology]

Hi all,

I ahve following simple CSS:

#wrapper { 
 margin: 0 auto;
 width: 100%;
}

#header {
 width: 100%;
 float: left;
 height: 100px;
}

#content {
    float: left;
    height: 350px;
    width: 900px;
    display: inline;
}

#footer { 
 width: 100%;
 clear: both;
} 

I need to center the #content part. Can someone help me out her, please? I can't make it go awy from the left side. The header and footer need to be 100% in width, though.

Many thanks,
M

[Erik J]

Try moving the rule "margin: 0 auto;" to the content div.
For IE6 add a rule "text-align: center" to the wrapper div:

Remove the "display: inline;" rule also.

[Paul O'B]

Also remove the float:left from #content also:

#content {
height: 350px;
    width: 900px;
    margin:auto;
}

Are you sure you want to set a height on #content? Otherwise it means that you will always be restricted to that height.

[webnology]

If I remove the float, I don't see the div anymore. I took the height for testing purposes now, I'll make it flexible afterwards.

[Paul O'B]

If I remove the float, I don't see the div anymore

You haven't provided any example html or a link so we are working in the dark here a bit You probably needed to add clear:both to #content seeing as your header was floated. However, if your header is 100% wide then it doesn't need to be floated either.

We would need to see some more code css and html or preferably a live example

[Erik J]

Maybe set a rule like "background-color:yellow;" to the div to make it visible. Or are they not empty?

[Dan Schulz]

What does the full HTML and CSS look like? (Something tells me this code isn't even necessary.)