Wed, 2010-03-03 02:00
This is a pretty popular technique these days, you have a header area with the background color spanning 100% width and then content inside of that with a fixed width and is centered in the middle of the page.
Typically I'll do something like this:
HTML:
<div id="header"> <div id="headerInner"> ...centered content... </div> </div>
CSS:
#header { background: #000; } #headerInner { margin: 0 auto; width: 900px; }
A while back I came across a tutorial where they did this technique with only one div (no centered inner div). I believe they used some kind of relative positioning? Can't really remember...
Anyone have any idea how to do this without the extra markup? Every single site I've checked seems to use the second div.
Wed, 2010-03-03 15:41
#1
text-align: center; on the
text-align: center; on the body tag will center everything.
Wed, 2010-03-03 16:36
#2
Thanks. That's not really
Thanks. That's not really what I was after though.
Wed, 2010-03-03 16:42
#3
so, you dont want it
so, you dont want it centered? You want 100% width header, then content centered without extra markup? maybe im not understanding.
Wed, 2010-03-03 17:25
#4
Here you go, this is what I'm
Here you go, this is what I'm talking about. Duplicate this without the extra markup, i.e., only one div instead of two:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru"> <head> <title>test</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="shortcut icon" href="/favicon.ico" /> <link rel="stylesheet" href="teststyle.css" type="text/css"> <style> :link,:visited { text-decoration: none; } ul,ol { list-style: none; } h1,h2,h3,h4,h5,h6,pre,code,p { font-size: 1em; } ul,ol,dl,li,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input { margin: 0; padding: 0; } a img,:link img,:visited img { border: none; } address { font-style: normal; } *:focus { outline: none; } textarea { overflow: auto; } /* remove scroll bar in IE */ html { overflow-y: scroll; } /* FF scroll bar jump fix */ img { vertical-align: bottom; } #wrapper { background: #3080cb; overflow: hidden; } #wrapper div { margin: 0 auto; width: 900px; color: #fff; padding: 30px; } </style> </head> <body> <div id="wrapper"> <div> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> </div> </body> </html>
Wed, 2010-03-03 17:39
#5
well, depending on what the
well, depending on what the content really is, you can do this without any divs. just style the html tags themselves. but Ill show you what I would do.
<body> <h1>logo and header</h1> <div id="content"> <p>content</p> <p>content</p> </div> </body>
h1 {width: 100%; height: 100px;} #content {width: 900px; margin: 0 auto;}
or...
<body> <h1>logo and header</h1> <p>content</p> <p>content</p> </body>
h1 {width: 100%; height: 100px;} p {width: 900px; margin: 0 auto;}
Wed, 2010-03-03 18:03
#6
Don't forget that BODY and
Don't forget that BODY and HTML are block level elements that you can use to your advantage as well!
Wed, 2010-03-03 18:06
#7
Good point Deuce.
Good point Deuce.
Wed, 2010-03-03 19:04
#8
CupidsToejam wrote: well,
well, depending on what the content really is, you can do this without any divs. just style the html tags themselves. but Ill show you what I would do.
<body> <h1>logo and header</h1> <div id="content"> <p>content</p> <p>content</p> </div> </body>
h1 {width: 100%; height: 100px;} #content {width: 900px; margin: 0 auto;}
or...
<body> <h1>logo and header</h1> <p>content</p> <p>content</p> </body>
h1 {width: 100%; height: 100px;} p {width: 900px; margin: 0 auto;}
I'm not sure I'm following... the code you supplied doesn't appear to duplicate the example I supplied? To what element would you apply the background color of the header? I'm also not a fan of placing the entire header inside of the H1 tag. Maybe the example was to basic.
I threw this next example together. You've got three sections (header, nav, and footer) that have background colors that span 100% width of the window and then you have content in each of them that is centered to 900px width. I just don't see how you can duplicate this type of layout with the body tag, etc.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru"> <head> <title>test</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="shortcut icon" href="/favicon.ico" /> <link rel="stylesheet" href="teststyle.css" type="text/css"> <style> :link,:visited { text-decoration: none; } ul,ol { list-style: none; } h1,h2,h3,h4,h5,h6,pre,code,p { font-size: 1em; } ul,ol,dl,li,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input { margin: 0; padding: 0; } a img,:link img,:visited img { border: none; } address { font-style: normal; } *:focus { outline: none; } textarea { overflow: auto; } /* remove scroll bar in IE */ html { overflow-y: scroll; } /* FF scroll bar jump fix */ img { vertical-align: bottom; } #header { background: #3080cb; } #header div { margin: 0 auto; width: 900px; color: #fff; padding: 30px; } #nav { background: #999; } #nav ul { margin: 0 auto; overflow: hidden; width: 900px; } #nav ul li { float: left; padding: 10px 15px; } #content { margin: 0 auto; width: 900px; padding: 30px 0; } #footer { background: #000; color: #fff; } #footer div { margin: 0 auto; width: 900px; padding: 20px 0; } </style> </head> <body> <div id="header"> <div> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> </div> <div id="nav"> <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> <li>Item 5</li> </ul> </div> <div id="content"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> <div id="footer"> <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div> </div> </body> </html>
Thu, 2010-03-04 14:58
#9
deronsizemore wrote: I'm not
I'm not sure I'm following... the code you supplied doesn't appear to duplicate the example I supplied?
It is exactly what you asked for, done a better cleaner way.
To what element would you apply the background color of the header? I'm also not a fan of placing the entire header inside of the H1 tag.
You'd apply the background color to the h1 tag. If you're not a fan, then dont do it. Some do, some dont. I feel your logos should be the h1, because they act as heading. and what better top-level heading then the site name and logo?
I threw this next example together. You've got three sections (header, nav, and footer) that have background colors that span 100% width of the window and then you have content in each of them that is centered to 900px width. I just don't see how you can duplicate this type of layout with the body tag, etc.
Have you even tried it? stop talking and just go try it out. Play around, and get your hands dirty.
Thu, 2010-03-04 17:06
#10
CupidsToejam wrote: It is
It is exactly what you asked for, done a better cleaner way.
Umm, sorry CTJ, but it's not what he asked for...
You'd apply the background color to the h1 tag. If you're not a fan, then dont do it. Some do, some dont. I feel your logos should be the h1, because they act as heading. and what better top-level heading then the site name and logo?
The page topic perhaps?
Deron, you could have your header div with full width and background, and then target the child elements directly with a 900px width and auto margins (similar to what CTJ was alluding to, but with your criteria met).
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru"> <head> <title>test</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="shortcut icon" href="/favicon.ico" /> <link rel="stylesheet" href="teststyle.css" type="text/css"> <style type="text/css"> html, body { margin: 0; } #wrapper { background: #3080cb; overflow: hidden; } #wrapper p, #wrapper h1 { margin: 0 auto; width: 900px; color: #fff; padding: 30px 0; } </style> </head> <body> <div id="wrapper"> <h1>Lorem ipsum</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> </body> </html>
Thu, 2010-03-04 18:07
#11
CupidsToejam
I'm not sure I'm following... the code you supplied doesn't appear to duplicate the example I supplied?
It is exactly what you asked for, done a better cleaner way.
To what element would you apply the background color of the header? I'm also not a fan of placing the entire header inside of the H1 tag.
You'd apply the background color to the h1 tag. If you're not a fan, then dont do it. Some do, some dont. I feel your logos should be the h1, because they act as heading. and what better top-level heading then the site name and logo?
I threw this next example together. You've got three sections (header, nav, and footer) that have background colors that span 100% width of the window and then you have content in each of them that is centered to 900px width. I just don't see how you can duplicate this type of layout with the body tag, etc.
Have you even tried it? stop talking and just go try it out. Play around, and get your hands dirty.
Have you tried either of the examples I gave you? I don't need to try yours to know that it's not what I asked for. lol. There may have been a misunderstanding initially and my point may not have gotten across, to which I apologize, but if you tried the code I supplied, I think you would see.
The code you gave me does have the header area 100% width, but, the content inside of that header area (H1) is not centered.
Umm, sorry CTJ, but it's not what he asked for...
Deron, you could have your header div with full width and background, and then target the child elements directly with a 900px width and auto margins (similar to what CTJ was alluding to, but with your criteria met).
Thanks you for seeing what I'm after. 
What you supplied is a good alternative, although I'm not sure if it would be easier or not having to center every child element where I could simply deal with adding one extra div to style once rather than styling multiple things over and over.
Wish I could find the tutorial demonstrating how to do this. I can't remember exactly but just seems like it done with one wrapper div that had a 100% width background with the content inside centered to a fixed width all while not needing to explicitly center each individual element (like you suggested in your example or a second "inner" div to wrap the centered content). I don't know. I can't figure it out and I can't find the link to the tutorial, so I guess I'll leave it at that and continue on with the way I've been doing it. 
Thanks for your thoughts!
Thu, 2010-03-04 18:29
#12
I guess I dont get it.
I guess I dont get it.
