Positioning div elements for layout

This article covers CSS positioning.
CSS positioning is a technology that uses CSS to position the screen of a website.
So you need a basic understanding of HTML and CSS.

A float and margin are important CSS properties when you position elements on screen.
It is possible to assign negative numbers for the margin values.
Negative margins can minimize the number of elements required for screen.

Float property

Float is a CSS positioning property.
The normal element following a float element does not recognize the existence of the float element and try to acquire its own box area.
However, the float element cannot invade the content area of the normal element.

<style type="text/css">
	#A {
		float: left;
		width: 100px;
		background-color: #66f;
	}
	#B {
		background-color: #ddd;
	}
</style>

Clear property

The clear property values are left, right, and both.
Each value's exact meaning is shown in the following examples.

A has float: left.
B has float: right.
C has no clear property.

<style type="text/css">
	#A {
		float: left;
		width: 100px;
		background-color: #66f;
	}
	#B {
		float: right;
		width: 100px;
		background-color: #ddd;
	}
	#C {
		background-color: #f66;
	}
</style>

Added clear: left to C.

<style type="text/css">
	#A {
		float: left;
		width: 100px;
		background-color: #66f;
	}
	#B {
		float: right;
		width: 100px;
		background-color: #ddd;
	}
	#C {
		clear: left;
		background-color: #f66;
	}
</style>

Change clear: left to clear: right in C.

<style type="text/css">
	#A {
		float: left;
		width: 100px;
		background-color: #66f;
	}
	#B {
		float: right;
		width: 100px;
		background-color: #ddd;
	}
	#C {
		clear: right;
		background-color: #f66;
	}
</style>

Change clear: right to clear: both in C.

<style type="text/css">
	#A {
		float: left;
		width: 100px;
		background-color: #66f;
	}
	#B {
		float: right;
		width: 100px;
		background-color: #ddd;
	}
	#C {
		clear: both;
		background-color: #f66;
	}
</style>

Negative Margins

First, let's look at an example of elements that does not have negative margins.

<style type="text/css">
	#A {
		float: left;
		width: 100px;
		background-color: #66f;
	}
	#B {
		float: left;
		width: 100px;
		background-color: #ddd;
	}
</style>

If you assign a negative value to the margin-left of A, A moves to the left by that value.
B moves along A too.

<style type="text/css">
	#A {
		float: left;
		width: 100px;
		margin-left: -50px;
		background-color: #66f;
	}
	#B {
		float: left;
		width: 100px;
		background-color: #ddd;
	}
</style>

If you assign a negative value to margin-right of A, A draws B towards himself by that value.
As a result, the contents of B will cover the contents of A by that value.

<style type="text/css">
	#A {
		float: left;
		width: 100px;
		margin-right: -50px;
		background-color: #66f;
	}
	#B {
		float: left;
		width: 100px;
		background-color: #ddd;
	}
</style>

3 column layout

A, B, C have float: left.
Because they do not have negative margins, each element do not invade other areas.

<style type="text/css">
	#A {
		float: left;
		width: 100px;
		background-color: #66f;
	}
	#B {
		float: left;
		width: 100px;
		background-color: #ddd;
	}
	#C {
		float: left;
		width: 100px;
		background-color: #f66;
	}
</style>

Modify A width value from 100px to 100%.

<style type="text/css">
	#A {
		float: left;
		width: 100%;
		background-color: #66f;
	}
	#B {
		float: left;
		width: 100px;
		background-color: #ddd;
	}
	#C {
		float: left;
		width: 100px;
		background-color: #f66;
	}
</style>

There are B and C under A.
To easily understand the following, you should consider A, B, and C to be side by side.

Add margin-right: -100% to A.
Then B and C overlap on the left side of A.

<style type="text/css">
	#A {
		float: left;
		width: 100%;
		margin-right: -100%;
		background-color: #66f;
	}
	#B {
		float: left;
		width: 100px;
		background-color: #ddd;
	}
	#C {
		float: left;
		width: 100px;
		background-color: #f66;
	}
</style>

Remove margin-right: -100% from A.
Add margin-left: -100% to B.
Then B overlaps on the left side of A, and C moves to the original B position.

<style type="text/css">
	#A {
		float: left;
		width: 100%;
		background-color: #66f;
	}
	#B {
		float: left;
		width: 100px;
		margin-left: -100%;
		background-color: #ddd;
	}
	#C {
		float: left;
		width: 100px;
		background-color: #f66;
	}
</style>

Add margin-left: -100px to C. (100px is the width of C element)
Then C moves on the right side of A.

<style type="text/css">
	#A {
		float: left;
		width: 100%;
		background-color: #66f;
	}
	#B {
		float: left;
		width: 100px;
		margin-left: -100%;	
		background-color: #ddd;
	}
	#C {
		float: left;
		width: 100px;
		margin-left: -100px;
		background-color: #f66;
	}
</style>

Website Design using 3 column layout with fixed width

The screen consists of header, man-menu, sidebar, content, extra, footer.

• header: It is located at the top and contains the company logo image.
• main-menu: It is under the header and displays the main menu.
• sidebar: It shows the submenu on the left of the screen.
• content: It shows the main contents in the center of the screen.
• extra: It shows ads on the right side of the screen.
• footer: It is located at the bottom and shows the global menu such as Copyright, Contact, Directions and so on.

The size of the main element mentioned above is specified as follows.

header

width: 1000px
height: 48px

main-menu

width: 1000px
height: 35px

sidebar

width: 175px
height: depends on content.

content

width: 720px
height: depends on content.

extra

width: 205px
height: depends on content.

footer

width: 1000px
height: 70px

Default HTML document

Copy the following and paste it to your editor.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="Keywords" content="keywords" />
<meta name="Description" content="description" />
<title>title</title>
<link rel="stylesheet" href="css/screen.css" type="text/css" />
</head>
<body>

</body>
</html>

Save it as index.html on the document base.

Paste the following to the body elements of index.html.

<div id="wrap">

	<div id="header">header</div>
	
	<div id="main-menu">main-menu</div>
	
	<div id="container">
		<div id="content">content</div>
	</div>
	
	<div id="sidebar">sidebar</div>
	
	<div id="extra">extra</div>
	
	<div id="footer">footer</div>
	
</div>

The wrap and container is extra elements needed for robust positioning.
The wrap contains all the divs in the document.
The container is required to lay out the three columns.

The content element comes before the sidebar element.
The content element is the most important and frequently changed on the web page, so it is advantageous for maintenance if it comes first.

Create css folder on the document base and create screen.css file in css folder with the following content:

@CHARSET "UTF-8";
/*** The Essential Code ***/
html, body {
	margin: 0;
	padding: 0;
	background-color: #FFF;
	font-family: "Liberation Sans", Helvetica, sans-serif;
	font-size: 1em;
}
#wrap {
	margin: 0 auto;
	padding: 0;
	width: 1000px;
}
#header {
	width: 1000px;
	height: 48px;
}
#main-menu {
	width: 1000px;
	height: 35px;
}
#container {
	width: 100%;
}
#content {
        
}
#sidebar {
	width: 175px;
}
#extra {
	width: 205px; 
}
#footer {
	height: 70px;
}
/*** Just for Looks ***/
#header, #footer {
	font-size: large;
	text-align: center;
	background: #999;
}
#main-menu {
	font-size: large;
	text-align: center;
	background: #DAEAAA;
}
#content {
	font-size: large;
	text-align: center;
	background: #DDD;
	height: 100px;
}
#sidebar {
	font-size: large;
	text-align: center;
	background: #66F;
	height: 100px;
}
#extra {
	font-size: large;
	text-align: center;
	background: #F66;
	height: 100px;
}

The content of the CSS document is a repetition of the following form:

Selector {
	Property: value;
	..
	.
}

There are various types of selectors such as Type, Descendant, Class, Id, Child, and Attribute.
The following shows each selector.

/* Type Selector */
body {

}
/* Descendant Selector */
ul strong {

}
/* Class Selector */
.redwine {

}
/* id Selector */
#header {

}
/* Child Selector */
body > p {

}
/* attribute Selector */
input[type="text"] {

}

The selector that begins with # is the ID selector.
The ID selector gives styles to the unique element in the HTML document.
In index.html, wrap, header, main-menu, container, content, sidebar, extra, footer are unique elements.
The selector that begins with .(dot) is the Class selector.

div.redwine vs div .redwine

div.redwine gives styles to <div class="redwine"> in HTML document.

div .redwine gives styles to elements that are contained in the div element and whose class is redwine.

Check the web page you have created so far.
No web server is required.
Double-click the index.html.

screen.css

Let's take a look at the contents of the CSS file so far.

html, body

html, body {
	margin: 0;
	padding: 0;
	background-color: #FFF;
	font-family: "Liberation Sans", Helvetica, sans-serif;
	font-size: 1em;
}

The above give styles to both the html and body elements.
Unlike the div, the html and body elements have default margins and padding in most web browsers.
Most web designers set the margins and padding of the html and body to zero, then start designing.

#wrap

#wrap {
	margin: 0 auto;
	padding: 0;
	width: 1000px;
}

The margin has four values.
If you assign only one value to the margin (e.g, margin: 100px),
100px is assigned to top, right, bottom, left.
If you assign two values to margin (e.g, margin: 100px 50px),
100px is assigned to top and bottom, and 50px is assigned to right and left.
If you assign three values to margin (e.g, margin: 100px 50px 25px),
100px is assigned to top and 50px is assigned to right and 25px is assigned to bottom in order. Left margin is assigned to equal to right.
If you assign four values to margin, each value is assigned to top, right, bottom, left in order.

If you assign auto to margin, it will locate element to center or middle.
If the second value is auto, the element moves to the center.

The default margin and padding of the div element are zero.

The contents of the CSS file are divided into /*** Essential Code ***/ and /*** Just for Looks ***/.
/*** Just for Looks ***/ is a setting for screen testing, which disappears when the CSS file is completed.

#container

#container {
	width: 100%;
}

100% means the maximum extent to which the content of the container can fit.
Since the margin and padding of the container is zero and no border is set, 100% is 1000px like wrap element.

Set left and right margins of #content

Modify #content of /*** Essential Code ***/ as shown below.

#content {
	margin-left: 175px;
	margin-right: 205px;
}

Add float: left to #container, #sidebar, #extra

To place #sidebar on the left of #content and #extra on the right of #content,
Modify the following at /*** The Essential Code ***/

#container {
	float: left;
	width: 100%;
}
#content {
	margin-left: 175px;
	margin-right: 205px;
}
#sidebar {
	float: left;
	width: 175px;
}
#extra {
	float: left;
	width: 205px; 
}
#footer {
	clear: both;
	height: 70px;
}

Add float: left to #container which encloses #content.
Add float: left to #sidebar and #extra.
Because #container, #sidebar, and #extra are float elements, you should think that they are next to each other, not up and down like a box in normal flow.
Add clear: both to #footer to prevent #content, #sidebar, and #extra content from invading #footer.

Place #sidebar on the left of #content

Add the following to #sidebar in the /*** The Essential Code ***/

#sidebar {
	float: left;
	width: 175px;
	margin-left: -1000px;
}

The margin-left: -100% has same effect.

Place #extra on the right of #content

Add the following to #extra.

#extra {
	float: left;
	width: 205px;
	margin-left: -205px; 
}

• http://www.html.net/tutorials/css/
• http://www.subcide.com/articles/creating-a-css-layout-from-scratch/P1/
• http://www.alistapart.com/articles/holygrail/
• http://coding.smashingmagazine.com/2009/07/27/the-definitive-guide-to-using-negative-margins/
• http://www.w3.org/QA/2002/04/valid-dtd-list.html
• http://www.ibm.com/developerworks/kr/library/wa-css/
• http://www.maxdesign.com.au/articles/css-layouts/