CSS Layouts are a standards-compliant method of creating your site’s look, and so, are the best way to create the design. Not only will there be great forward compatibility, using CSS to position your content will make the pages more accessible and easy to update in the future.
In HTML5
the content of your html page is put into semantic tags [eg., <header> <nav> <main> <section> <article> <footer>, etc.] or tags that create chunks of content or blocks of content. These are positioned on the page by their order, and by the corresponding CSS rules.
In the layout I’ve provided, positioning is created not with classes (.name), but with IDs (#name). These are indicated in the style sheet with the pound or number symbol (sometimes called “hash” tags): #
What this looks like
In the style sheet (either embedded or as a separate file), the CSS would look something like this:
#box {
background: #fff;
margin: 0 auto;
width: 770px;
height: 600px;
border: 1px solid #000000;
padding: 10px;
}
This would be a fixed design that puts all the content in one box, 770px wide by 600px high. The auto margins (in conjunction with a width) center the page, and there is a black border around the whole thing with 10px of padding inside the box. (See it in action here.)
The box model
Remember that your html elements in boxes include the:
- the width of your content
- the padding
- the border
- the margin.
Floats
Elements can be floated to the left or right, and the content then wraps to the other side. So, if you float an image to the left, all the content will wrap to the image’s right.
We can use a combination of divs, floats, margin and padding to create layouts using the default static flow of CSS.
