Solved

How to create website margins

Posted on 2011-09-08
22
209 Views
Last Modified: 2012-08-14
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.  

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?
0
Comment
Question by:brettr
  • 9
  • 7
  • 6
22 Comments
 
LVL 4

Expert Comment

by:ZephyrTC
ID: 36507887
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...
0
 

Author Comment

by:brettr
ID: 36507900
Thanks.  How do I get the top and bottom bands to expand the entire width?
0
 

Author Comment

by:brettr
ID: 36507941
You have any idea what this little exclamation mark means in Safari web inspector: http://d.pr/YBuI.
0
 
LVL 4

Expert Comment

by:ZephyrTC
ID: 36511243
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
0
 
LVL 4

Expert Comment

by:ZephyrTC
ID: 36511249
Should be:
.content {
  width: 800px;
  height: 100%;
  margin: auto;
}  

Open in new window

0
 
LVL 4

Expert Comment

by:ZephyrTC
ID: 36511582
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.
0
 
LVL 4

Assisted Solution

by:bastianr
bastianr earned 250 total points
ID: 36511603
To get the bands, you need to add some extra divs around the content and set the body margin and padding to 0. This example assumes you have a bg image 86 px high.
<!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;
}
#footer {
	color: #fff;
	float: left;
	padding: 12px;
}
</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 id="footer">
			<p>footer</p>
		</div>
	</div>
</div>
</body>
</html>

Open in new window

0
 
LVL 4

Expert Comment

by:bastianr
ID: 36511632
Sorry ZephyrTC, I posted before I saw your latest. Anyway brettr, this is another possible solution.
0
 
LVL 4

Expert Comment

by:ZephyrTC
ID: 36511773
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)?
0
 

Author Comment

by:brettr
ID: 36511796
@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?
0
 
LVL 4

Expert Comment

by:bastianr
ID: 36511821
@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
0
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
LVL 4

Expert Comment

by:ZephyrTC
ID: 36511828
Do you want the footer to be the width of the content or the width of the screen?
0
 

Author Comment

by:brettr
ID: 36511840
Width of screen.
0
 
LVL 4

Expert Comment

by:bastianr
ID: 36511849
can you post a graphic of your ideal layout?
0
 

Author Comment

by:brettr
ID: 36511925
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.
0
 
LVL 4

Accepted Solution

by:
ZephyrTC earned 250 total points
ID: 36512017
Updated bastianr's code to suit your needs:

<!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;
}
#footer {
        position: absolute;
        bottom: 0;
	Width: 100%;
	color: #fff;
	float: left;
	padding: 0px;
        Background: #000;
}
</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

0
 
LVL 4

Expert Comment

by:ZephyrTC
ID: 36512028
update:

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

Author Comment

by:brettr
ID: 36512110
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.
0
 
LVL 4

Expert Comment

by:bastianr
ID: 36512188
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

0
 
LVL 4

Expert Comment

by:bastianr
ID: 36512403
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.
0
 

Author Comment

by:brettr
ID: 36513059
Thanks.  Sent you an email a little earlier.  Let me know if you're not receiving it.
0
 
LVL 4

Expert Comment

by:ZephyrTC
ID: 36513901
I do as well. info@zephyrtc.com
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

This article discusses four methods for overlaying images in a container on a web page
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

867 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

15 Experts available now in Live!

Get 1:1 Help Now