12 replies [Last post]
deronsizemore
deronsizemore's picture
Offline
Enthusiast
Last seen: 9 years 40 weeks ago
Timezone: GMT-5
Joined: 2007-01-18
Posts: 113
Points: 14

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.

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 4 years 13 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

text-align: center; on the

text-align: center; on the body tag will center everything.

deronsizemore
deronsizemore's picture
Offline
Enthusiast
Last seen: 9 years 40 weeks ago
Timezone: GMT-5
Joined: 2007-01-18
Posts: 113
Points: 14

Thanks. That's not really

Thanks. That's not really what I was after though.

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 4 years 13 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

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.

deronsizemore
deronsizemore's picture
Offline
Enthusiast
Last seen: 9 years 40 weeks ago
Timezone: GMT-5
Joined: 2007-01-18
Posts: 113
Points: 14

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>

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 4 years 13 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

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;}

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 2 years 21 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

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!

all ยป http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 4 years 13 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

Good point Deuce.

Good point Deuce.

deronsizemore
deronsizemore's picture
Offline
Enthusiast
Last seen: 9 years 40 weeks ago
Timezone: GMT-5
Joined: 2007-01-18
Posts: 113
Points: 14

CupidsToejam wrote: well,

CupidsToejam wrote:

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>

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 4 years 13 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

deronsizemore wrote: I'm not

deronsizemore wrote:

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.

Quote:

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?

Quote:

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.

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 5 years 41 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

CupidsToejam wrote: It is

CupidsToejam wrote:

It is exactly what you asked for, done a better cleaner way.

Umm, sorry CTJ, but it's not what he asked for...

Quote:

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>

deronsizemore
deronsizemore's picture
Offline
Enthusiast
Last seen: 9 years 40 weeks ago
Timezone: GMT-5
Joined: 2007-01-18
Posts: 113
Points: 14

CupidsToejam

CupidsToejam wrote:
deronsizemore wrote:

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.

Quote:

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?

Quote:

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.

wolfcry911 wrote:

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. Smile

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. Wink

Thanks for your thoughts!

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 4 years 13 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

I guess I dont get it.

I guess I dont get it.
Tired