asked on

How to create website margins

I'd like to keep the main content of my site centered. The content area is about 800px in width. I have a background color. If the browser window is 1000px, there should be 100px on each side of the main content exposing the background color. As the browser window grows, the main content remains at 800px and more background is exposed.

https://www.experts-exchange.com does exactly this. I'd also like a band and the bottom and top that extends to the edges, like EE's top black band with their logo and buttons.

How do I get this to work?

ZephyrTC

There are a couple ways to do this. You can create a division for the "background" and one for the "content"... here's an example using css

html:

<body background="yourcolor">
<div class="content"> Your Content Here</div>
</body>

css:
.content {
  Width: 800px
  margin: auto
}

Open in new window

this will fix your content at 800px

keep in mind that you will need to reference the css file in your html code...

brettr

ASKER

Thanks. How do I get the top and bottom bands to expand the entire width?

brettr

ASKER

You have any idea what this little exclamation mark means in Safari web inspector: http://d.pr/YBuI.

ZephyrTC

you would add "height: 100%:

The code above is missing one thing on the css... the character to end the line ";"

Here's a revised code:

.content {
  width: 800px;
  height: 100%;
  margin: auto;

Open in new window

Sorry for the little error... it was too late to be answering even simple questions apparently :D

ZephyrTC

Should be:

.content {
  width: 800px;
  height: 100%;
  margin: auto;
}

Open in new window

ZephyrTC

here's some more information on CSS Centering:
http://www.maxdesign.com.au/articles/center/

You can think of EM designations as a kind of scale-able pixel. I am personally partial to liquid layouts, but if you want static sizes, you are going down the right path by designating the size in pixels.

On your top and bottom band: here's some code that should work for the whole site (please just ask if you want any explanation:

[b]HTML[/b]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="main.css" rel="stylesheet" type="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>

<div class="topbar"></div>
<div class="content">Your Content Here</div>
<div class="bottombar"></div>

</body>
</html>

[b]CSS[/b]

@charset "utf-8";
/* CSS Document */

body {
	background: #666;
}

.topbar,
.bottombar {
	width: 100%;
	height: 50px;
	background: #0F0;
}
.bottombar {
	position: absolute;
	bottom: 0;
	z-index: 0;
}
.content {
	position: absolute;
	top: 50px;
	left: 100px;
	width: 800px;
	height: 100%;
	margin:0auto;
	background: #fff;
	z-index: 99;
}

Open in new window

You will want to save the CSS file as "main.css" in the same folder.

This is not an elegant solution (if your screen is over 1000px wide, it will not be centered, as the left: 100px centers the content division on that size screen by positioning it 100px from the left side of the screen. Absolute positioning with a 100% height accomplishes the content fill requirement without actually filling the page with content. Most web pages that are liquid (change to fit the resolution) only grow to fit the content vertically.)

The z-index puts the higher number division in front of the lower number ones.

SOLUTION

bastianr

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

bastianr

Sorry ZephyrTC, I posted before I saw your latest. Anyway brettr, this is another possible solution.

ZephyrTC

no worries bastianr.

I was wondering... my posted solution grows the content division to the full length of the screen, regardless of the content within (using the position:absolute attribute).

Is there a way to do this in your code (as it will be a better all-around solution because the box is positioned in accordance with the resolution via margin:auto and width:800px)?

brettr

ASKER

@bastianr:

Perfect. But how do you get the footer to stay on the bottom...as a footer? Rather than just another block under something else?

bastianr

@zephyr, not sure--I'd want to understand the layout brettr wants a bit better

@brettr, I floated the footer to take it out of the flow. It works in recent browsers but would need some tweaking for IE7 and earlier

ZephyrTC

Do you want the footer to be the width of the content or the width of the screen?

brettr

ASKER

Width of screen.

bastianr

can you post a graphic of your ideal layout?

brettr

ASKER

The layout in your example is what I want except the footer should be at the bottom of the page and expand the width of the page. Here's what I'd like: http://d.pr/E6Ci.

ASKER CERTIFIED SOLUTION

ZephyrTC

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

ZephyrTC

update:

you may need to add text-align: center; to the footer section in order to center the text if desired.

brettr

ASKER

Great! Thanks.

Do either of you hire out? I would like to hire either of you for various CSS jobs. It would be just like what happened here.

bastianr

If you want the footer "pinned" to the bottom, use fixed positioning. This is tricky because you don't want it to obscure your content, you need to adjust margins on the content to compensate. If you just want it to scroll then just place the footer div outside the container with the 800px width. Here's an example with the fixed option, as before, this won't work on older browsers to treat with care. Also, the outer wrapper div is superfluous here.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>27299126</title>
<style type="text/css">
body {
	margin: 0;
	padding: 0;
	background: #333 url(bg01.gif) repeat-x;
}
/*#outer-wrapper {
	background: url(bg01.gif) bottom repeat-x;
	padding-bottom: 86px;
}
*/
#inner-wrapper {
	width: 800px;
	margin: auto;
}
#header {
	height: 86px;
	color: #ec5e0b;
}
h1 {
	margin: 0;
	padding: 0 12px;
	line-height: 86px;
}
#content {
	background-color: #fff;
	padding: 12px 12px 12px 12px;
	margin-bottom: 100px;
}
#footer {
	background: #ddd;
	/*float: left;*/
	padding: 12px;
	position: fixed;
	bottom: 0;
	width: 100%;
}
</style>
</head>

<body>
<div id="outer-wrapper">
	<div id="inner-wrapper">
		<div id="header">
			<h1>header</h1>

		</div>
		<div id="content">
			<p>Content for  id "content" Goes Here</p>
			<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut a sapien  bibendum justo mollis molestie. Suspendisse vitae ipsum ipsum, quis  pharetra est. Praesent et consectetur eros. Aliquam erat volutpat.  Suspendisse ut ipsum enim, sed aliquet urna. Lorem ipsum dolor sit amet,  consectetur adipiscing elit. Maecenas fermentum sem et enim vulputate a  sodales magna lobortis. Pellentesque scelerisque felis vitae ligula  varius vel vulputate lectus faucibus. Aliquam risus ante, faucibus eu  porta non, faucibus quis arcu. In pellentesque, justo ut laoreet  fringilla, odio turpis sodales tellus, nec accumsan mauris velit id  tellus. Sed consequat massa ut ipsum tempus in porta neque scelerisque. </p>
			<p> Cras tincidunt sodales elit, nec venenatis justo malesuada eget. Vivamus  ac tellus viverra leo tempor sollicitudin. Proin congue, leo a pulvinar  commodo, purus arcu luctus massa, in tempor ante orci in magna. Ut  euismod faucibus massa quis pulvinar. Nam eu nunc ut lacus scelerisque  fringilla vitae a mauris. Nullam non est ac urna scelerisque porttitor.  Donec at enim nec dolor ultricies congue ac vel erat. Quisque sed nisl  eu velit venenatis egestas. </p>
			<p> Nulla facilisi. Quisque vitae eros dapibus eros ultrices hendrerit.  Phasellus tempus sagittis quam, non lobortis erat egestas ut. Nullam  aliquam erat sit amet nunc placerat vehicula. Quisque ornare metus ac  urna convallis id imperdiet nibh tempus. Praesent et neque orci, eget  mattis magna. Sed mattis dictum orci, sit amet sodales justo ornare in.  Nunc scelerisque enim sed urna luctus rutrum. Nulla vehicula dignissim  pellentesque. Quisque sit amet lectus sem. Proin ut ante risus. Nunc at  felis a elit aliquet auctor. In suscipit tempor ultrices. Lorem ipsum  dolor sit amet, consectetur adipiscing elit. Class aptent taciti  sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </p>

			<p> Nunc tortor metus, pellentesque quis feugiat placerat, dictum at eros.  Nam urna tortor, pulvinar in gravida ut, varius sagittis magna. Nam  scelerisque nunc ut est pellentesque id tristique turpis blandit. Nullam  fermentum consectetur libero id porta. Donec in tortor justo, a sodales  sapien. Morbi accumsan auctor purus eu rhoncus. Duis eros ligula,  vestibulum vel egestas sed, iaculis vel mauris. Nulla rutrum, nibh id  pretium ornare, libero nulla tempus ante, ut convallis mauris dui a  risus. Duis vehicula, eros at rhoncus porttitor, magna nulla feugiat mi,  sit amet iaculis orci est sed nisi. Donec tempus diam a lorem pharetra  hendrerit. Vestibulum porttitor vehicula augue ac scelerisque. Ut cursus  nibh quis ante varius luctus. </p>
			<p> Aenean auctor suscipit rutrum. Proin eget fermentum magna. Ut  consectetur, ante at aliquet placerat, velit metus ultricies lectus, id  fermentum magna elit vel mi. Mauris sed nisl ligula. Etiam iaculis  pretium venenatis. Suspendisse potenti. Duis in nulla justo. Fusce  turpis mauris, tristique a sagittis ac, facilisis a sem. Etiam egestas  ultricies lorem et viverra. Proin id metus diam, at rhoncus ipsum. Ut  auctor odio ac purus placerat viverra. Aliquam erat volutpat. Ut  malesuada libero ac velit gravida et dignissim nisl malesuada. Cras a  enim in nulla consectetur tincidunt. Suspendisse feugiat dui et nisl  elementum cursus. </p>
		</div>
	</div>
	<div id="footer">
		<p>footer</p>

	</div>
</div>
</body>
</html>

Open in new window

bastianr

Cross-posting again, was on a conf call and just catching up. I don't have lots of capacity but do a little free-lancing. Email me at r.bastian.2@gmail.com if you want to talk.

brettr

ASKER

Thanks. Sent you an email a little earlier. Let me know if you're not receiving it.

ZephyrTC

I do as well. info@zephyrtc.com