This page uses a centered division to to act as a wrapper to hold the other content for the page. The division is formatted with the ID style named #centerpage. The style formats this division to 800 pixels wide and keeps it centered as the window is resized.
Styles used to create this layout:
body {
margin: 0;
text-align: center;
background-color: #CCCCFF;
}
The margins of the body are all set to zero so they won't affect the layout. The text-align is a workaround needed for some very old browsers that don't interpret the CSS centering of the #centerpage style below. The background-color is just there to show off the different parts of the layout.
#centerpage {
width: 800px;
position: relative;
margin: 0 auto 0 auto;
padding: 0 10px 10px 10px;
text-align: left;
background-color: #CCFFFF;
}
The left and right margins set to auto is what makes the div centered. I made the positioning of this division relative in case I want to absolutely position any descendents relative to this centered division (see other examples). Because these absolutely-positioned elements would be "nested" inside this centered div (that is, there HTML code would be located within the div tags of this centered div, no matter where their positioned boxes appeared), they would move along with this centered div as the window was resized. The top and bottom margins of this div are zero so no unwanted space comes into the layout. The padding on the sides and bottom keep content away from the edge. The text-align:left overrides the text centering inherited from the body tag.
Notes: The title line at the top is an h1 that has centeredHead class style applied. This style has top margin set to 0px (zero pixels), otherwise there would be extra space between this line and the top boundary of the division.
In fact, since I'm using a normalize.css style sheet with this Web page, I don't need to adjust the top margin of the h1 as described above, since the normalize.css does it. Also, I don't need the article, aside, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } style that is in the internal stylesheet of this page, since normalize.css takes care of that, too.
I must say, I don't like the rather tight line spacing that this normalize.css gives me (because of its choice of the default sas-serif font. I think I'd change that to line-height: 120% in my body style. Or change the font to Verdana. Either looks better than this choice made normalize.css. But remember: The normalize.css settings are only a starting point, and you are expected to change things to your liking with additional styles in your own style sheets.
You can also use sectioning elements with float properties to arrange content within the centerpage division into columns. The sidebar below is an example of this. The styles for making the sidebar are given below, if you are interested in how it's done.
The Sidebar: Notice the interesting sidebar on the right side of the page here. The content of the sidebar is text that is located in its own section of this document (this is done using the HTML5 <section> tag). I created an ID style named #rightsidebar that formats the width and border of the sidebar and makes it float to the right (causing this text to flow around it. The sidebar section is actually located in the HTML just above this current paragraph. Floating it off to the right (within the #centerpage wrapper) then allows the following content (this paragraph) to continue down the page and flow around the sidebar as needed.
The title and paragraph in the sidebar were formatted using descendent selectors. The title is formatted as h2 and the paragraph is just formatted as a normal paragraph, but I created two selectors ( #rightsidebar h2 and #rightsidebar p ) that apply the formatting shown. These selector names find any h2 or p content inside something formatted as #rightsidebar, and apply the formatting specified by the styles. Cool. Notice that the h2 here looks nothing like a normal h2 (the descendent selector overrides that other h2 formatting and applies the one made specially for use in the sidebar).
The "rollover buttons" in the sidebar are actually just text links that have been formatted with CSS styles to do the cool rollover trick (try them out in the browser!). I created the special class and pseudo selector styles ( a.side, a.side:link, a.side:visited, and a.side:hover ) to make this effect. The text in the sidebar is made into links, and then the .side class is applied to the links. Voilà! I was particularly pleased with the result (although you may not like the choice of colors). Making the a.side style use display:block allows the links to respond even if you point at the blank areas within the links (not just at the text itself). The a.side style has thin borders on the top and left edges, and medium thickness borders on the bottom and right (which apply to the link and visited states). The a.side:hover style has the thin and medium borders reversed—this is what causes the visual effect of the "button" seeming to press inwards as you rollover the link.
The styles used for the sidebar and its contents are shown below:
#rightsidebar {
margin: 0px 0px 10px 10px;
padding: 10px;
float: right;
width: 200px;
border: medium solid #FF0000;
}
#rightsidebar h2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 24px;
font-style: italic;
font-weight: bold;
color: #FFFF00;
background-color: #000000;
margin: 0px;
padding: 15px 0px;
text-align: center;
}
#rightsidebar p {
font-weight: bold;
color: #666666;
font-family: Arial, Helvetica, sans-serif;
}
a.side {
font: bold 18px Arial, Helvetica, sans-serif;
color: #FFFFFF;
text-decoration: none;
display: block;
width: 100px;
margin: 3px 2px 2px 2px;
padding: 2px 2px 2px 15px;
border-style: solid;
border-color: #000000;
border-top-width: thin;
border-right-width: medium;
border-bottom-width: medium;
border-left-width: thin;
}
a.side:link {
background-color: #3333FF;
}
a.side:visited {
background-color: #990066;
}
a.side:hover {
color: #FFFF00;
background-color: #FF0000;
border-top-width: medium;
border-right-width: thin;
border-bottom-width: thin;
border-left-width: medium;
}