The html and body elements are distinct block-level entities, in a parent/child relationship.
The html element’s height and width are controlled by the browser window.
It is the html element which has (by default) overflow:auto, causing scrollbars to appear when needed.
The body element is (by default) position:static, which means that positioned children of it are positioned relative to the html element’s coordinate system.
In almost all modern browsers, the built-in offset from the edge of the page is applied through a margin on the body element, not padding on the html element.
Centering All Content on the Page
Centered content is one thing shared by nearly every webpage. For a demo, see my Centered Layout Example. The code necessary to do this is very simple:
Apply a width (either fixed or a percentage) to the <body> tag
Set the left and right margins set to “auto” on your <body> tag
<body style="width:960px; margin:0 auto;">
<p>Your header, content, and footer go between the body tags.</p>
</body>
Fake Tabs
Especially on forms, you will find that you need to align textboxes and their labels, for example:
The trick is to float the labels and give them a fixed width.
If you need to create 3 or more columns, you can still use the float trick, but it may be easier to use an HTML table instead.
Images
There are two ways to place an image on a webpage, the HTML <img> tag and the CSS background-image property. Which method you choose is usually answered by the question, “Will text, or any other HTML element, appear on top of the image?”. If you answer is “yes”, then use CSS. On the other other hand, if your image will not be obstructed with anything, then use the <img> tag.
Positioning Text
Use Padding
If I’m trying to adjust the location of a line of text, or any other HTML element, the first thing to try is the CSS padding property. OK, great, but which element should you apply the padding to? Let's look at a couple of examples.
This pararagraph, and the previous one, have no special formatting applied to them other than the standard margin. Now let's say the next paragraph should be indented and spaced further away from it's adjacent paragraphs.
This one is spaced differently.
The previous paragraph had the style padding:3em applied to it as follows:
<p style="padding:3em;">This one is spaced differently.</p>
Because only that one line needed to be different, I applied the padding to it.
Now let's look at an example where multiple elements (HTML tags) need to spaced the same.
Everything in here will be boxed in appropriately.
Because of padding.
Sweet, no?
<div style="padding: 42px 50px 31px 164px; background:url(../images/speechBubble.png) no-repeat; width:286px; height:127px;">
<p>Everything in here will be boxed in appropriately.</p>
<p>Because of padding.</p>
<p>Sweet, no?</p>
</div>
The important difference in this example is the content is inside a container (the <div> with the speech bubble graphic) and the padding is applied to the container.
The Exception to the Rule
This is a left floated element and the text to the right has been pushed away with the CSS margin property.
When dealing with floats, the margin property works better. Place the margin on the floated element to keep surrounding content away from it.
The code used in this example is:
<p style="float:left; margin-right:3em; margin-bottom:1em; width:30%;">This is a left floated element and the text to the right has been pushed away with the CSS <code>margin</code> property.</p>
<p>When dealing with floats, the margin property works better. Place the margin on the floated element to keep surrounding content away from it.</p>
Sidebar Layouts
This layout behaves similarly to a two column table (with the exception of the background colors or images).
The clever bit of CSS that makes this work is to float (this) main content area left, but then open up some space on the right for other content to sneak in by giving this float some negative right margin.
The content, like paragraphs, headers, and images will be tight up against the surrounding boxes, which typically is not what you want. Add this bit of CSS to space the content away (you will also need an additional <div>). Here is all the code:
#main {
width:100%;
float:left;
margin-right:-200px;
background-color:lawnGreen;
}
aside {
width:200px;
float:left;
background-color:lemonchiffon
}
#mainUsable { /* This prevents the contents of #main and aside from overlapping each other */
margin-right:225px;
margin-left:2em;
}
<div id="main">
<div id="mainUsable">
<p>Your main content goes here.</p>
</div>
</div>
<aside>Sidebar content goes here.</aside>
Holey crap, isn’t this a lot of work when you could simply float the sidebar to the right. Sure, you could but then you’d be left with two problems.
The #main content will flow underneath the sidebar.
<aside> will appear before your content in the source code. (This only matters from an SEO standpoint, and even then… meh.)
I tend to use a table with one row and two cells to build content like this example is demonstrating. Yes, I know tables are supposedly evil, but given the current state of web layout, I think it is a perfectly acceptable solution in most scenarios.
