Content:: CSS Two Column Layout
)
Two Column CSS Layout
A 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 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
<!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>
