skip navigation

www.Hilands.com


Content:: CSS Two Column Layout

A Two Column CSS Layout
Last Modified: 2009-10-14
Two Column CSS Layout
Two Column CSS Layout
The two column layout is simple. Using two <div> tags with linked to CSS "col1" and "col2" using float right and left and a final <div> tag using clear:both; to stop the float style.


Click Here to View
The Source 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-US">
<head>
	<title></title>
	<style type="text/css" media="screen">
		body {
			background-color:#ccc;
			margin: 0px;
			padding: 0px;
			font-size: 11px;
			font-family: verdana, arial, helvetica, sans-serif;
			}
		#main {
			margin:0 auto;
			width:650px;
			background-color:#333;
			color:#fff;
			padding:10px;
			}
col1 ID style definition float left with a fixed width
		#col1 {
			background-color:#9c9;
			float:left;
			width:400px;
			}
col2 ID style definition float right with a fixed width
		#col2 {
			background-color:#99c;
			float:right;
			width:250px;
			}
		.content {
			padding:10px;
			color:#333;
			border:1px #336699 solid;
		}
	</style>
</head>
<body>
<div id="main">
	<div class="content" style="background-color:#fff; text-align:center;">
		div main forces the columns to squeeze up together.
	</div>
HTML <div> set to the col1 id which will push the content inside to the left of the page
	<div id="col1">
		<div class="content">
			<b>Column One</b><br /><br />
			The content allows us padding without having to worry about messing
			up the primary column layout.<br />
			<br />
			<b>Issue</b><br />
			Depending on the design style we may run into issues with the
			columns not matching the same height. This can be an issue in such
			an example where say we want the columns to be the exact length and color.
			We should also remove the padding for main. As it can be slightly
			distracting.
		</div>
	</div>
HTML <div> set to the col2 id which will push the content inside to the right of the page
	<div id="col2">
		<div class="content">
			<b>Column Two</b><br /><br />
			Alot of text repeating. Alot of text repeating. Alot of text repeating. Alot of text repeating. Alot of text repeating. Alot of text repeating. Alot of text repeating. Alot of text repeating. Alot of text repeating. Alot of text repeating. Alot of text repeating. Alot of text repeating. Alot of text repeating. Alot of text repeating. Alot of text repeating. Alot of text repeating. Alot of text repeating. Alot of text repeating. Alot of text repeating. Alot of text repeating.
		</div>
	</div>
The clear:both statement stops the columns from running on. If we left this out it could cause the browser to render the page incorrectly.
	<div style="clear:both;">
		<div class="content" style="background-color:#fff; text-align:center;">
			clear both tells the floats to STOP above us!
		</div>
	</div>
</div>


</body>
</html>