Solved

How to create website margins

Posted on 2011-09-08
22
208 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
Comment Utility
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
Comment Utility
Thanks.  How do I get the top and bottom bands to expand the entire width?
0
 

Author Comment

by:brettr
Comment Utility
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
Comment Utility
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
Comment Utility
Should be:
.content {
  width: 800px;
  height: 100%;
  margin: auto;
}  

Open in new window

0
 
LVL 4

Expert Comment

by:ZephyrTC
Comment Utility
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
Comment Utility
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
Comment Utility
Sorry ZephyrTC, I posted before I saw your latest. Anyway brettr, this is another possible solution.
0
 
LVL 4

Expert Comment

by:ZephyrTC
Comment Utility
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
Comment Utility
@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
Comment Utility
@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
What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

 
LVL 4

Expert Comment

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

Author Comment

by:brettr
Comment Utility
Width of screen.
0
 
LVL 4

Expert Comment

by:bastianr
Comment Utility
can you post a graphic of your ideal layout?
0
 

Author Comment

by:brettr
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
Thanks.  Sent you an email a little earlier.  Let me know if you're not receiving it.
0
 
LVL 4

Expert Comment

by:ZephyrTC
Comment Utility
I do as well. info@zephyrtc.com
0

Featured Post

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

771 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

10 Experts available now in Live!

Get 1:1 Help Now