CODEWITHSUNDEEP
csswidthcenter
Justin Meltzer
Justin Meltzer

Reputation: 13558

CSS centering with 100% width

I'm trying to center all the content of a page so that when you adjust the size of the browser, the content moves along with the adjustment. I use the CSS code:

margin: 0px auto;
width: 670px;

However, I want a colored header to cover 100% of the width, while the text within the header adjusts with the rest of the page. How do I simultaneously do these two things?

Upvotes: 2

Views: 10584

Answers (6)

csi
csi

Reputation: 9338

You will need to nest some divs...

body{
margin: 0px;
text-align: center;
}

div#container{
text-align: left;
background-color: #ffffff;
width: 670px;
margin: 0px auto;   
}

That should center your div#container and you can put your content within that container.

EDIT: The above will just center your page container. I missed the header part. Here is that...

body{
margin: 0px;
text-align: center;
}

div#header-container{
height: 200px;
background-color: #999999;
}

div#header{
text-align: left;
background-color: #999999;
width: 670px;
height: 200px;
margin: 0px auto;   
}

div#content{
text-align: left;
background-color: #ffffff;
width: 670px;
margin: 0px auto;   
}


<html>
<body>
<div id="header-container">
     <div id="header">Page Title and the such...</div>
</div>
<div id="content">
Some Page Content
</div>
</body>
</html>

Upvotes: 0

rcravens
rcravens

Reputation: 8388

Here is an example of a page with a header that stretches the full width of the screen, but has content that is limited to the 670px area.

http://jsfiddle.net/CaUD3/

Hope that gets you started.

Bob

Upvotes: 1

Steven K.
Steven K.

Reputation: 2106

something like this, of course you should use full spec html and linked css style sheets...

<html>
<head>
</head>
<body>
<div style="height:120px; background-color:#FF0000;">
    <div style="background-color:#FFFF00; width:670px; margin:0 auto;">
        My page title
    </div>
</div>
<div style="background-color:#00FFFF; width:670px; margin:0 auto;">
    My page content
</div>
</body>
</html>

Upvotes: 1

Omkar
Omkar

Reputation: 366

Use margin-left:20%; margin-right:20% That should centre your content.

If u want a readymade solution. take a look at Matthew taylor's Layouts

Upvotes: 0

Matt Ellen
Matt Ellen

Reputation: 11612

Nest the text in a paragraph within the container the text is currently in, and set the paragraph's style to what you need it to be, while setting the container's style to be 100% width.

Upvotes: 0

Matt Huggins
Matt Huggins

Reputation: 83309

You shouldn't have a comma between the values used in the margin property. Instead, it should appear as follows:

margin: 0px auto;

Upvotes: 0

Related Questions