Notes on Liquid Layouts¶
Goal: using CSS and HTML, create a basic 2-column liquid layout
one column is the menu, and it will be on the left of the screen
it has links to various important pages in the website.
the second column is the main content
we want a small amount of space separating the two columns
the exact amount of space is whatever looks best
The Basic Content¶
here’s the body of our page:
<body>
<h3>Menu</h3>
<ul>
<li>Home page</li>
<li>Food</li>
<li>Clothing</li>
<li>Furniture</li>
</ul>
<h1>Content</h1>
<p>This is the content column. The main content of the page goes here.</p>
<p>When styled using using the appropriate <code>float</code> styles,
these two columns will appear side-by-side.</p>
<p>Each column takes up a percentage of the screen, and so it is an
example of a <em>liquid layout</em>: the layout automatically re-formats
itself if you change re-size the browser window.</p>
</body>
right now, the Menu appears first followed underneath by the Content
instead, we want the Menu on the left side in its own column, and then to the right of that, we want the Content
Naming the Columns¶
the first thing we need to is to treat each columnas their own element so that we can apply styles to them
we will do this using div tags
we’ll put the Menu into its own div element with id menu
and the Content into its own div with id content
<body>
<div id="menu">
<h3>Menu</h3>
<ul>
<li>Home page</li>
<li>Food</li>
<li>Clothing</li>
<li>Furniture</li>
</ul>
</div>
<div id="content">
<h1>Content</h1>
<p>This is the content column. The main content of the page goes here.</p>
<p>When styled using using the appropriate <code>float</code> styles,
these two columns will appear side-by-side.</p>
<p>Each column takes up a percentage of the screen, and so it is an
example of a <em>liquid layout</em>: the layout automatically re-formats
itself if you change re-size the browser window.</p>
</div>
</body>
by default, a div does not change the syle of its contents
Float¶
the basic trick for putting the #menu and #content divs side-by-side
is to use their float properties
we want #menu on the left, so we will make it float left
we want #content on the right, so we will make it float right
/* this style applies to the element with id="menu" */
#menu {
float: left;
width: 15%;
}
/* this style applies to the element with id="content" */
#content {
float: right;
width: 80%;
}
the #menu is smaller than the #content, so we set their widths
differently
the widths are set using % as the unit, so the columns will re-size themselves if the size the of the screen changes; this is called a liquid layout
notice that the total width of the two columns adds up to 95%, which is not the full width of the screen
this leaves a little bit of space between the columns
Content Styling¶
the #content header now appears below the #menu header
lets try to make them both at about the same level:
#content h1 {
margin-top: 0;
font-family: Verdana;
}
we’ve also changed the heading font to Verdana, a sans-serif web-safe fonts
now lets suppose we also want to the #content background to be a light
gray:
#content {
float: right;
width: 80%;
background-color: rgb(240, 240, 240);
padding-left: 0.2em;
}
we’ve also added a little bit of left padding so that the letters in
#content don’t appear right beside the very edge
And So On¶
many more tweaks and adjustments are possible
designers can spend a lot of time getting things just right
there are many more advanced page layout features we could discuss, but this is a beginning course so we will not go into any more detail (you can find lots of information and help about CSS on the web)
when you are done, you should test your layout by re-sizing the screen; it should look okay for all reasonable screen re-sizings