A CSS Walkthrough, part 7

In the previous part of this walkthrough, I made columns with the "About Me" section.

Staggered Headers

Here is another interesting technique. I would like to indent the content while allowing the headers to stick out on the left, giving them more focus. To do this, I will apply some padding to the content section and then apply a negative margin to the headers. The relevant CSS is:

#pageContent { 
	padding-left:13px; 
	width:730px; 
}

h1, h2, h3, h4, h5, h6 { margin-left:-10px; }
		

Remember that the width of div "pageContent" used to be 735 pixels and the left-padding was 8 pixels. To keep the sum equal, I moved 5 pixels from the width to the left-padding. There is now 5 pixels extra gutter space to the left of the content, while the total container width has not changed.

I have also applied a negative left-margin to all of the possible headers. I am only using H1 and H2 now, but if I added more they would follow this style too. By giving them a left margin of -5 pixels, they now sit in the same position they were in before, while the rest of the content has an extra padding. The CSS for this technique is located in step8.css and can be viewed at step3-1.html.

Centering the Whole Layout

My last technique will center the entire layout. It is actually a very simple technique... I just decided to save it for last. To do this, I will wrap the entire layout (everything inside of the body section) in a container div with the full width of the content and apply auto-margins to that div.

I have decided to give this div an ID of "page." Here is the CSS I am applying to it:

#page { 
	width:940px; 
	margin:0 auto; 
}
		

940 pixels is a little more than the full width of the div "pageContent" and the list of polaroids, including the spaces in between and on both sides. I used shorthand notation for the margin; the 0 applies to top and bottom, while the "auto" applies to left and right. By using auto, the div applies the same margin to both sides, so it sits exactly in the middle of the body. You can view the added div at step4.html and the relevant CSS in step9.css.

We have completed all the CSS to be applied to this webpage. Move on to the epilogue.