To be able to implement most web page designs, a grid is required. With traditional HTML, tables were used, but markup with many nested layout tables is not good for accessibility, and cleaner code is easier to maintain. The following examples are XHTML and CSS valid (except for the minimum width IE workaround), accessible to screen readers, and have been tested in Internet Explorer 6 and 7, Firefox 2, Opera 9, Safari 2 and Camino 1.5.
- Set up the HTML document
- Three column layout
- Flexible columns
- Liquid middle column layout
- Nested grids
Create a new file and call it ‘web.htm’.
Edit the file by adding the following code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Title</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8;" />
<meta name="description" content="Description" />
<meta name="keywords" content="keyword, keyword, keyword" />
</head>
<style type="text/css">
body
{
color: #000000;
background-color: #ffffff;
font-size: 90%;
font-family: arial;
margin: 0;
padding: 0;
}
p
{
display: block;
margin: 0;
padding: 1em;
}
</style>
<body>
<div id="Wrapper">
<p>
Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex
ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa
qui officia deserunt mollit anim id est laborum.
</p>
</div>
</body>
<html>
Notes
- Move the style definitions out of the markup code and header and into a separate style sheet file, for re-use on other pages and easy maintenance.
Create a new file and call it ‘threecolumn.htm’, and add the following code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Title</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8;" />
<meta name="description" content="Description" />
<meta name="keywords" content="keyword, keyword, keyword" />
</head>
<style type="text/css">
body
{
color: #000000;
background-color: #ffffff;
font-size: 90%;
font-family: arial;
margin: 0;
padding: 0;
}
p
{
display: block;
margin: 0;
padding: 1em;
}
</style>
<body>
<div style="width: 800px; margin: auto;">
<div style="display: block;
color: #ffffff; background-color: #483e37;">
<p>Header</p>
</div>
<div style="display: block;">
<!-- left -->
<div style="display: block; width: 200px; float: left;
color: #ffffff; background-color: #6f7c91;">
<p>Left column</p>
</div>
<!-- middle -->
<div style="display: block; width: 400px; float: left;
color: #ffffff; background-color: #939dac;">
<p>Middle column</p>
</div>
<!-- right -->
<div style="display: block; width: 200px; float: right;
color: #ffffff; background-color: #6f7c91;">
<p>Right column</p>
</div>
<div style="clear: both;"></div>
</div>
<div style="display: block;
color: #ffffff; background-color: #483e37;">
<p>Footer</p>
</div>
</div>
</body>
<html>
Notes
- To centre an element, add ‘auto’ as the margin style.
- If margin or padding style definitions cause issues, add an additional div element inside and apply the margin and padding to it. Nested div’s are not great for accessibility, but the design will work – just try to avoid too many nested DIVs.
- Although div’s are block-level elements, setting the display style to ‘block’ is required for the grid layout.
Create a new file and call it ‘flexible.htm’, and add the following code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Title</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8;" />
<meta name="description" content="Description" />
<meta name="keywords" content="keyword, keyword, keyword" />
</head>
<style type="text/css">
body
{
color: #000000;
background-color: #ffffff;
font-size: 90%;
font-family: arial;
margin: 0;
padding: 0;
}
p
{
display: block;
margin: 0;
padding: 1em;
}
#Wrapper
{
/* Designed for a max screen width of 1280 and min 1024,
keeping browser margins and the right scroll bar in mind. */
max-width: 1260px;
min-width: 1004px;
/* IE workaround */
width: expression(
(document.documentElement.offsetWidth) > 1259
* (parseInt(document.body.currentStyle.fontSize)
/ parseInt(document.body.currentStyle.fontSize))? "1260px"
: ((document.documentElement.offsetWidth) < 1005?
"1004" : "100%"));
background-image: url('Images/SideBarBack.gif');
background-position: top right;
background-repeat: repeat-y;
}
</style>
<body>
<div id="Wrapper">
<div style="display: block;
color: #ffffff; background-color: #483e37;">
<p>Header</p>
</div>
<div style="display: block;
color: #ffffff; background-color: #939dac;">
<!-- left -->
<div style="display: block; width: 20%; float: left;
color: #ffffff; background-color: #6f7c91;">
<p>Left column</p>
</div>
<!-- middle -->
<div style="display: block; float: left;
color: #ffffff; background-color: #939dac;">
<p>Middle column</p>
</div>
<!-- right -->
<div style="display: block; width: 20%; float: right;
color: #ffffff; background-color: #6f7c91;">
<p>Right column</p>
</div>
<div style="clear: both;"></div>
</div>
<div style="display: block;
color: #ffffff; background-color: #483e37;">
<p>Footer</p>
</div>
</div>
</body>
<html>
Notes
- For flexible layouts, setting a minimum width is recommended.
Create a new file and call it ‘liquidmiddle.htm’, and add the following code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Title</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8;" />
<meta name="description" content="Description" />
<meta name="keywords" content="keyword, keyword, keyword" />
</head>
<style type="text/css">
body
{
color: #000000;
background-color: #ffffff;
font-size: 90%;
font-family: arial;
margin: 0;
padding: 0;
}
p
{
display: block;
margin: 0;
padding: 1em;
}
#Wrapper
{
/* Designed for a max screen width of 1280 and min 1024,
keeping browser margins and the right scroll bar in mind. */
max-width: 1260px;
min-width: 1004px;
/* IE workaround */
width: expression(
(document.documentElement.offsetWidth) > 1259
* (parseInt(document.body.currentStyle.fontSize)
/ parseInt(document.body.currentStyle.fontSize))? "1260px"
: ((document.documentElement.offsetWidth) < 1005?
"1004" : "100%"));
background-image: url('Images/SideBarBack.gif');
background-position: top right;
background-repeat: repeat-y;
}
</style>
<body>
<div id="Wrapper">
<div style="display: block;
color: #ffffff; background-color: #483e37;">
<p>Header</p>
</div>
<div style="display: block;">
<!-- left -->
<div style="display: block; width: 200px; float: left;
color: #ffffff; background-color: #6f7c91;">
<p>Left column</p>
</div>
<!-- right -->
<div style="display: block; width: 200px; float: right;
color: #ffffff; background-color: #6f7c91;">
<p>Right column</p>
</div>
<!-- middle -->
<div style="display: block;
margin-left: 200px; margin-right: 200px;
color: #ffffff; background-color: #939dac;">
<p>Middle column</p>
</div>
<div style="clear: both;"></div>
</div>
<div style="display: block;
color: #ffffff; background-color: #483e37;">
<p>Footer</p>
</div>
</div>
</body>
<html>
These examples can be nested to create a complex grid layout. Create a new file and call it ‘grids.htm’, and add the following code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Title</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8;" />
<meta name="description" content="Description" />
<meta name="keywords" content="keyword, keyword, keyword" />
</head>
<style type="text/css">
body
{
color: #000000;
background-color: #ffffff;
font-size: 90%;
font-family: arial;
margin: 0;
padding: 0;
}
p
{
display: block;
margin: 0;
padding: 1em;
}
#Wrapper
{
/* Designed for a max screen width of 1280 and min 1024,
keeping browser margins and the right scroll bar in mind. */
max-width: 1260px;
min-width: 1004px;
/* IE workaround */
width: expression(
(document.documentElement.offsetWidth) > 1259
* (parseInt(document.body.currentStyle.fontSize)
/ parseInt(document.body.currentStyle.fontSize))? "1260px"
: ((document.documentElement.offsetWidth) < 1005?
"1004" : "100%"));
background-image: url('Images/SideBarBack.gif');
background-position: top right;
background-repeat: repeat-y;
}
</style>
<body>
<div id="Wrapper">
<div style="display: block;
color: #ffffff; background-color: #483e37;">
<p>Header</p>
</div>
<div style="display: block;
color: #ffffff; background-color: #939dac;">
<!-- left -->
<div style="display: block; width: 20%; float: left;
color: #ffffff; background-color: #6f7c91;">
<p>Left column</p>
</div>
<!-- middle -->
<div style="display: block; width: 59%; float: left;
color: #ffffff; background-color: #6f7c91;">
<div style="display: block;">
<!-- left -->
<div style="display: block; width: 100px;
float: left; color: #ffffff;
background-color: #939dac;">
<p>Inner left</p>
</div>
<!-- right -->
<div style="display: block; width: 100px;
float: right; color: #ffffff;
background-color: #939dac;">
<p>Inner right</p>
</div>
<!-- middle -->
<div style="display: block;
margin-left: 100px;
margin-right: 100px;
color: #ffffff;
background-color: #6f7c91;">
<p>Middle column</p>
</div>
<div style="clear: both;"></div>
</div>
</div>
<!-- right -->
<div style="display: block; width: 20%; float: right;
color: #ffffff; background-color: #6f7c91;">
<p>Right column</p>
</div>
<div style="clear: both;"></div>
</div>
<div style="display: block;
color: #ffffff; background-color: #483e37;">
<p>Footer</p>
</div>
</div>
</body>
<html>
Notes
- To nest a liquid middle layout inside a flexible layout, the middle column of the flexible layout must have an added width. When this width is a percentage, Internet Explorer may calculate the width to be too large causing the right column to drop down to the next line. Setting the middle column’s percentage lower can fix this.
No Comments Yet
No comments yet.
Comments RSS TrackBack Identifier URI
Leave a comment
