Blogging Tips

HTML & CSS Basics: Page Structuring with divs

Once you’ve got your content in place the next job is to determine the structure of the page. To do this we use divisions which use the div tag, usually along with an id or classname.

The Mark-up

Divisions are a block level tag and whilst they can be used within lists and other divs, they shouldn’t be placed within certain other block level elements such as paragraphs or headers. For example

<div><p>Hello, she said</p></div>

<p>Hello, <div>she said</div></p>

The first line is correct. The div surrounds the paragraph. The second is incorrect as a div cannot be within a paragraph tag.

A typical structure of a page can be something like

<body>

<div id="wrapper">
    <div id="header">
        <h1>Site Name Here</h1>
    </div>
    <div id="sidebar">
        <p>All sidebar content, lists and links here</p>
        <ul id="menu">
            <li><a href="#">Anchor 1</a></li>
            <li><a href="#">Anchor 2</a></li>
        </ul>
    </div>
    <div id="content">
        <h2>Page Title</h2>
        <p>Content here</p>
    </div>
    <div id="footer">
        <p>Copyright blah</p>
    </div>
</div>

</body>

As you can see, the div tags divides our content into specific sections. There is no limit to the number of divs you can use on a page, however for basic pages you’ll often find around 5-10 is enough. For more complex designs naturally more will be required, but simply use what you need and nothing more. Divs are not always required however. For example if you have a list of links for a menu, you don’t necessarily need a div around that, as a list is a block level element too, it can have the id and be targeted in just the same way.

Without any CSS applied, divs will have little affect on the way the text looks. Their default settings is simply to start the block on a new line and nothing else i.e. no padding, no margins, no positioning. The flexibility of divs comes in when you start to use those to target the content on the site.

CSS Styling

Divs can be styled with all of the generic CSS properties eg. border, background, color, padding, margin etc. Their flexibility comes with positioning, mainly floats. I briefly wrote about floats last week, when creating a horizontal menu using a list. Floats allow us to position blocks of content (be that text or images) next to other content. As mentioned in previous posts, floats really need their own post or two as it can get complex, however for positioning divs we can still look at the basics of floats.

Using our markup above, we can decide how we want the page to appear. A standard solution would be to set a width on the wrapper, then have the header go across the top of the site but contained within the wrapper, the menu sits to the left or right, the content on the opposite side to the menu and then the footer across the bottom. Sounds complicated? It’s not so bad! Keep in mind, when using floats you need to specify a width unless you’re floating an image (this can be fixed or a percentage) due to the way some browsers work. An example of the CSS could be

#wrapper {
    width: 960px;
    border: 1px solid #000;
    border-width: 0 1px;
}
#header {
    width: 100%;
    border-bottom: 1px solid #000;
    background: #900;
}
#sidebar {
    width: 150px;
    float: left;
}
#content {
    width: 780px;
    float: left;
}
#footer {
    width: 100%;
    border-top: 1px solid #000;
    background: #009;
    color: white;
    clear: both;
}

As you can see, most of the CSS written here we’ve already covered and is fairly straightforward. The 2 additional properties are float and clear. The sidebar is set to float left. This will automatically pull the content up to be next to it in some browsers, but you shouldn’t rely on that. So the content div is also floated left. You could float the content div right if you wanted to. Then the footer has a property clear with a value of both. This effectively ensures the footer starts below the floated items above, otherwise, if the menu was taller than the content div, the footer would appear below the content and next to the menu, which isn’t the desired effect.

With the same markup you could put your sidebar to the right and your content to the left simply by changing the value of the float from left to right. Or you could keep the CSS as it is and move the sidebar div to below the content div. As you can see, it’s quite flexible.

Written by Sarah from Stuff By Sarah
Posted on January 8th, 2009 and filed under Design & Coding
Do not forget to subscribe to our RSS feed for updates

3 Responses to “HTML & CSS Basics: Page Structuring with divs”

Author comments are in a darker gray color for you to easily identify the posts author in the comments

Luis says:

January 11, 2009 at 4:54 pm

Do you think that someone with no HTML background can learn by reading posts like this one? I think so, great stuff, thank you.
Sarah says:

January 11, 2009 at 5:09 pm

Well, hopefully my posts will explain the basics and give you enough to try things out and experiment, see for yourself how things work and how changing properties make a difference.

At the moment I’m just explaining things in steps. Now there are enough posts established I can put up better examples of use. So hopefully you can learn what you need