Chapter 7: Page Layouts

By default, your browser will display elements one page after another, from top to bottom and left to right. Element positioning can be affected by margins and padding. This chapter will focus on using boxes, something we learned in chapter 6, to position elements that will result in a page design we like.

A flow element actually makes creating layouts fairly easy and simple. With your header set in place, if you wanted to divide your main page body into, say, 3 columns, simply create two of those columns as float elements. Imagine that your basic website will have columns in the following order: navigation bar, article, and a miscellaneous sidebar. The navigation bar should float to the left and the sidebar should float to the right. The middle segment, the article, can be set with a larger margin (taking into consideration how large the navigation bar will be) or it can also be set to float left. Sometimes an element will not be floating correctly in the position where you want it. In these cases, ‘clearing’ the box of left, right, or both items can put it to the proper row. This will also force the wrapper (the big box that contains every element) to also encompass elements that are floating a little below the rest.

Building A Flexible Layout

Flexible layouts adapt to the size of your browser or viewing medium. Your elements will probably be sized using percentages. A flexible layout is great to adapt to different monitor sizes, but there is probably a limit to how much you want your content to stretch. If your browser is very, very wide, you don’t want your lines of text to stretch to only 1 line wide, which is possible for short paragraphs. Instead, you will probably want to specify a maximum width (max-width) and/or a minimum width (min-width) so that your layout is not stretched too thin. The optimal width for a 800 x 600 monitor screen is 750 pixels. The optimal width for a 1280 x 1024 display is 1220 pixels. Create a wrapper to contain your style:

div.wrapper {

width: 100%;

max-width: 1220px;

min-width: 780px;


You then would only need to create a div element that will enclose all other elements in your page layout. Apply your wrapper like this:

<div id=”wrapper”> <!-opens wrapper–>

<div id=”header”> header contents </div>

<div id =”navig”> navigation content </div>

<div id=”article”> article content </div>


As I was working on the Individual Case Project for this module, I had the hardest time figuring out the left/right margins for the divisions. Most of my things (header, article, footer) were placed in the center, but there is no ‘center’ float, which is annoying. I tried out using “margin: 0px auto 0px;” in a few places so that the left/right could be centered, but nope, it doesn’t always work. (It did for the header and footer, but not so much for the other things.) Why was this? Also, another problem I had was if I created <div> columns (3 of them) and wanted to float things inside it, say “float: right;” why wouldn’t my image float to the right (or right-align)? It is actually floating on the left right now, and I don’t know how to fix it or what is wrong with my code.


One thought on “Chapter 7: Page Layouts

  1. Ash Mallente says:

    Creativity is what separates ordinary sites from the extraordinary ones, so never be afraid to get a little creative. As long as you’re staying on topic and are keeping the site functioning properly, you can get a little creative. People visiting your site want to see originality. They wouldn’t visit your site at all if they wanted the same old stuff.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s