Liquid Layouts
Basic CSS layouts (view source code of each):
- Basic 2 column liquid layout
- 3 column layout with fixed widths
- 3 column liquid layout
- 3 column layout using fixed widths and absolute positioning
- 4 column layout using absolute positioning and percentage widths
- Also check out this Layout Gala
CSS Absolute Positioning
From previous lessons you should have a grasp on how to use a div and style it and position it using CSS floats.
To get started with absolute positioning, forget everything you've learned so far about CSS floats. If you think of each div as a box or a container, also think about positioning these boxes using coordinates.
Hopefully you are familiar with the concept of using X and Y coordinates. Instead of positioning our boxes (div) using x,y, we'll specify by using precise measurements from the edges of the browser windows.
For example, take the code for a div container positioned on the page using absolute positioning:
#container {position:absolute;
top:50px;
left:25px;
width:400px;
border:1px solid black;
}
The browser will read look for an div id called "container" and it will position this container 50 pixels from the top edge of the browser window and 25 pixels from the left edge of the browser window. It will also set the width to 400 pixels.
For the #container example above, when it's written in your html code, it can handle text and images just like normal:
<div id="container">
Place content here
</div>
Another example using absolute positioning, this time placing an image on the screen in a specific location:
Using the HTML code below:<img src="image.jpg" class="logo" />
The subsequent CSS could look something like this:
img.logo {position:absolute;
top:85px;
left:50px;
}
Instead of placing the image inside a div of its own, I've attached a class called "logo". The CSs code will place this image 85 pixels from the top edge and 50 pixels from the left edge of the browser window.
TopHTML code example using absolute positioning
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="styles.css" />
<title>CSS Absolute Positioning</title>
</head>
<body>
<div id="header_text">Header text goes here</div>
<div id="header_text2">Blue header text</div>
<div id="container">
<p>Content</p>
<p>Content</p>
<div class="note">Content</div>
<p>Content</p>
<div class="note">Content</div>
<div class="note">Content</div>
<p>Content</p>
<p>Content</p>
<h3>h3 heading header</h3>
<p>Content</p>
<div id="footer">Content</div>
</div>
<div id="navcontainer">
<ul id="navlist">
<li><a href="#">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#">Item five</a></li>
</ul>
<div id="sub_nav">test test test</div>
</div>
<div id="right_container">
<p>Content</p>
<p>Content</p>
<p>Content</p>
</div>
</body>
</html>
And the CSS code... styles.css
/* CSS Document */
#header_text {
position:absolute;
top:45px;
left:200px;
font:lighter 35px/1.25 "Times New Roman", Times, serif;
letter-spacing:-1px;
color:#000000;
}
#header_text2 {
position:absolute;
top:45px;
left:575px;
font:lighter 35px/1.25 "Times New Roman", Times, serif;
letter-spacing:-1px;
color:#0099CC;
}
#container {
border:1px dashed pink;
position:absolute;
top:80px;
left:200px;
width:350px;
margin:0 0 25px 0;
padding:5px 0 10px 0;
}
#right_container {
border:1px dashed pink;
border-right:1px solid #0099CC;
position:absolute;
top:80px;
left:575px;
width:350px;
margin:0 0 25px 0;
padding:5px 0 10px 0;
}
#right_container p {
color:#0099CC;
}
p {
font:normal 12px/1.25 Arial, Helvetica, sans-serif;
color:#000;
word-wrap: break-word;
/*text-indent:25px;*/
}
.note {
border-top:1px solid #000;
padding:3px 0 10px 3px ;
font:lighter 18px/1.25 "Times New Roman", Times, serif;
color:#000000;
}
h3 {
border-bottom:1px solid #000;
padding:10px 0 0 0 ;
font:lighter 18px/1.25 "Times New Roman", Times, serif;
color:#000000;
text-indent:10px;
}
/* Navigation */
#navcontainer {
width: 200px;
position:absolute;
top:80px;
left:15px;
}
#navcontainer ul {
margin-left: 0;
padding-left: 0;
list-style-type: none;
font:normal 12px/1.25 Arial, Helvetica, sans-serif;
}
#navcontainer a {
display: block;
padding: 3px;
width: 160px;
background-color: #F5F5F5;
border-bottom: 1px solid #0099CC;
}
#navcontainer a:link {
color: #0099CC;
text-decoration: none;
}
#navcontainer a:hover {
background-color: #000;
color: #fff;
}
#sub_nav {
width: 160px;
position:relative;
top:30px;
border:1px dashed pink;
}
#footer {
position:relative;
top:30px;
width: 750px;
margin:15px 0 50px 0;
padding:5px;
border:1px dashed pink;
border-right:20px solid #000;
font:normal 12px/1.25 Arial, Helvetica, sans-serif;
color: #0099CC;
}
CSS Relative Positioning
If you look at the HTML code you'll notice the footer div is placed inside the container div.
<div id="container">
<p>Content</p>
<div id="footer">Content</div>
</div>
The CSS for the footer id is as follows:
#footer {
position:relative;
top:30px;
width: 750px;
margin:15px 0 50px 0;
padding:5px;
border:1px dashed pink;
}
The browser will read this and position the footer div 30 pixels from the bottom of the container div. So in other words, the footer is placed 30 pixels relative to the container div.
A margin of 50 pixels has been added to give some buffer space between the bottom of the footer and bottom edge of the browser window. That's assuming you have enough content to reach the bottom edge.
This time relative positioning is used instead of absolute positioning because we are dealing with a footer. Most of the time the footer resides at the bottom of all content. If the footer was placed using absolute positioning, the content above would have to have a very precise length. Meaning if more content was added and a footer was placed using absolute position, some content may overlap each other.
This would not be a good idea:
#footer {
position:absolute
left:50px;
top:700px;
}
Rounded Corner Divs
If you have to use rounded corner, here are a few examples that could come in handy. However, be warned, the more rounded cornes you use, the more confusion and messier code.
- Example 1 - Fixed width
- Example 2 - Expandable div using a percentage
- Example 3 - Expandable div using a fixed width - less compliated
Note: The rounded corner images are not transparent, they all use a white background. 
Form design
This example shows how to create form fields and labels using the label selector.
<!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
label {
display:block;
width:150px;
float:left;
text-align:right;
padding-right:20px;
}
input {
margin-bottom:10px;
border:1px solid red;
padding:3px; color:#F00;
float:left;
}
br {
clear:left;
}
#form {
border:1px solid #000;
width:400px;
float:left;
}
</style>
</head>
<body>
<div id="form">
<form action="#" method="get">
<label for="Name">Name</label>
<input type="text" id="name" /><br />
<label for="Password">Password</label>
<input type="text" id="pw" /><br />
<label for="City">City</label>
<input type="text" id="city" />
</form>
</div><!--end form-->
</body>
</html>