CODEWITHSUNDEEP
htmlcss
Brandon Dorsey
Brandon Dorsey

Reputation: 153

Centering content without divs

I recently ran across this "article" that explains how to center content with only the use of the html and body tag. But what I can't not figure out is how to make a full width header and footer while still having my content centered using this method. Any suggestions?

Upvotes: 0

Views: 70

Answers (3)

Rob
Rob

Reputation: 15158

EDIT: I mis-read the question and rewrote my answer as this:

There are two ways to accomplish what you want. First is to absolutely position the element which will take it out of the flow and allow you to expand the width outside of the body but this can complicate some elements. The second is to use negative margins. I'm being pulled away but I'll try and give an example later if no one else does.

EDIT: Slapped this together real quick.

<!doctype html>
<style>
        body{width:980px;margin:0}
        p{position:absolute;width:100%;background:#ccc;}
</style>
<p>One</p>

Upvotes: 0

Nick
Nick

Reputation: 100

I don't think you can, if you use the body tag as a div, then any other divs inside it will only have the width of the body tag. So

body {
    width: 200px; 
    margin: 20px auto; 
    padding: 20px;
    border: 1px solid black;
}

will make any divs have a maximum width of 200px.

see this jsfiddle.

Upvotes: 1

Enriko Podehl
Enriko Podehl

Reputation: 85

this article explains, that you can center content with margin: 20px auto; you need to give the footer and the header the same css. at least, it would be easier, more readable and structured, if you use div-blocks. that is, what div-blocks are for...structure your website.

Upvotes: 0

Related Questions