Making a Two Column Fluid Layout With Rounded Corners
on Sat Jul 05 08:34:36 GMT 2008 in XHTML and CSS and viewed 15583 times
Taking apart the two column blue layout of the Shadow Fox Network. Learn how to build a full two column layout with rounded corners.
If you read the previous article about the three column layout, it left off with some vague reference to how to build a working two column layout in the same manner. You probably were wondering about that a bit, so here we’re going to clarify everything.
Here will be the final outcome of the layout: The finished layout.
Introduction
To start, we’re going to reconstruct this Shadow Fox Network from the ground up. So I always start with the basics in both the HTML file and the CSS file.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css" media="screen">
/* css will go here */
</style>
</head>
<body>
</body>
</html>
Now if you follow this design to the “T,” you’ll get about 10 different people saying that it’s not “valid” because you aren’t sending the page as xml as you’re supposed to with the XHTML 1.1 DTD. Personally, I don’t care. My page validates as XHTML 1.1 whether as HTML or XML, and yours will as well.
Also we’re going to keep the CSS in the HTML document for the purpose of the tutorial, but I encourage you to organize it into separate files to keep it as clean as possible. Or don’t, it’s all good.
Starting Out
So to start out on this magical sojourn, let’s add some CSS to define some basic elements. I always start out with the BODY and h1-6 tags.
BODY { background-color:#36566D;
color:#FFF;
margin:0;
padding:0;
font:12px 'Trebuchet MS', 'Lucida Grande', Verdana, Arial, Sans-Serif;
line-height:150%; }
h1 { padding:0;
margin:0;
color:#FFF;
font-size:130%; }
h2 { padding:0;
margin:0;
color:#FFF;
font-size:120%; }
h3 { padding:0;
margin:0;
color:#FFF;
font-size:105%; }
And that’s about it for now. I started out with the first three header elements because usually, that’s all I use. I might add some others in later, but for now, this will serve your purpose.
Setting up the Structure of the Columns
This layout will have two columns, right? A right and left. Now, for simplicity you’ll call them #right and #left. At the moment we’ll give each a simple black border to make sure that we know where they are.
The HTML
<div id="right">
This is the right column for content.
</div>
<div id="left">
This is the left column. Navigation will go here.
</div>
Two easy <div> elements. The right will go first because the content will be in the right column, and as most SEO’s can tell you, content should usually go first.
The CSS
#right { float:right; width:70%; border:1px solid; }
#left { margin-right:71%; }
That’s the whole CSS. Just that. The #right should be the one that’s floated because the float should always come first and that’s where the content will go. It has a width of 70% so that it will always fill 70% of your browser, and the #left has a margin to the right of 71%. You want the margin to be a bit bigger than the right just for a bit of space. The #left will automatically fill to fit the space left by the #right and margin. And you also have the border on the #right just to make sure you know where the column starts and ends.
So now you have a blue blackground and two columns with some filler text. Why don’t you fill it in a bit?
Some rounded corners
Before you continue, know that I did not figure out how to do these rounded corners by myself. The credit goes all to Nifty Corners. I basically modified it to reduce some of the un-necessary CSS and make it a bit easier for people to understand. Unfortunately it looks like the website is not up anymore, but you can search for it on Google and look under the cached pages.
Now to start here’s the basic markup of the HTML you’ll use.
<div class="box">
<b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>
<div class="boxcontent">
Content goes here.
</div>
<b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b>
</div>
The box <div> defines the basic box that will contain all of the content and the corners. Then you have the mess of <b> elements. The reason behind it being that the elements for it have to be inline to work and still be valid.
Now the CSS behind this is quite interesting as well.
.box { background-color:#406480;
margin-bottom:5px; }
.boxcontent { padding:.5em;
margin:2px; }
b.rtop, b.rbottom { display:block; background-color:#36566D; }
b.rtop b, b.rbottom b { display:block; height:1px;
overflow:hidden; background-color:#406480; }
b.r1 { margin:0 5px; }
b.r2 { margin:0 3px; }
b.r3 { margin:0 2px; }
b.rtop b.r4, b.rbottom b.r4 { margin:0 1px; height:2px; }
The box class defines a basic background color, and I added a margin to the bottom so that the boxes wouldn’t be right ontop of one another. The boxcontent class is there because you can’t add padding without that last “buffer” of sorts around the content. Otherwise the box and corners would mess up. Then there’s the mess of <b> elements. Well, display:block means to display each element on a new line, basically, and there’s also the background color of the body element on the rtop and rbottom classes so that when the margin takes effect in the other <b>’s inside the .rtop or .rbottom classes the body color will show; without that, you wouldn’t notice that the corners are rounded.
After that there’s the definition for the <b> elements inside each tag. This is again pretty basic: each will display as a block, each will have a height of 1 pixel, you want the overflow hidden, and the background color will now be of the box’s color. And then you have each of the separate <b> elements inside the rtop or rbottom classes. They use margins, and at one pixel in height each (save the r4 <b>), they give the illusion of rounded corners.
Adding The Headers
Whew! That was quite a bit. You can now add all the blocks you want, wherever you want in the columns, and it should work. And you should also probably take out that ugly black border.
Now you can add those bars at the top and bottom for, well, keywords and navigation. We’ll start with the navigation bar. I use the same one for both top and bottom. It’s a pretty simple <div> element. And same with the header I use for the title and description of my site.
<div class="sides">
<ul>
<li><a href="http://www.shadow-fox.net">Shadow Fox Network</a></li>
<li><a href="http://yoururl.com">Your site</a></li>
</ul>
</div>
A very simple way to do this. And the CSS is simple as well.
.sides { border-bottom:2px solid #CFDCE6;
background-color:#596F80;
margin-bottom:5px;
padding:.2em .2em .2em .7em;
clear:both; }
.sides ul { padding: 0; margin:0; }
.sides li { display:inline;
padding:0;
margin:0;
margin-right:3px; }
.sides a { font-size:12px;
text-decoration:none;
color:#FFF; }
.sides a:hover { text-decoration:underline; }
The sides have a padding that’s almost uniform except for the .7em on the left. It also has the clear:both for the column that was floated that must be cleared. So you must put this on the bottom, otherwise the the layout will mess up.
I also need to style the <ul> and <li> elements. You should take off the padding and margin on the unordered list and the list elements. Also you need to make the list elements display inline, which means (obviously) to display them in a line. And the margin-right is there to give some space. And the rest is to style the links in there a bit more.
Finally we just need the last bar for the Site title and description.
HTML
<div id="header"><h1>The Shadow Fox Network - Your Resource for
Webmaster Articles and Tutorials on XHTML, PHP, CSS, XML, and Javascript.</h1></div>
It’s a simple <div> element with a single header inside. You can use it for your website’s title and description if you want to.
CSS
#header { background-color:#BF9060;
border-bottom:3px solid #806C59;
padding:.2em .2em .2em .7em; }
#header h1 { font-size:12px;
padding:0;
margin:0;
font-weight:bolder;
color:#000; }
And the CSS is also simple. The padding is the same as the sides class, for the same reason: you need a bit of space between the very left side and the text. And then it’s just a matter of the background color. Also, you want to make the header a bit smaller to make sure that it fits into the small little bar and not be too obtrusive.
Final Results
And there you have your two column layout!
Finished Page!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css" media="screen">
BODY { background-color:#36566D;
color:#000;
margin:0;
padding:0;
font:12px 'Trebuchet MS', 'Lucida Grande', Verdana, Arial, Sans-Serif;
line-height:150%; }
h1 { padding:0;
margin:0;
color:#FFF;
font-size:130%; }
h2 { padding:0;
margin:0;
color:#FFF;
font-size:120%; }
h3 { padding:0;
margin:0;
color:#FFF;
font-size:105%; }
a { color:#E6AC73;
text-decoration:none; }
a:hover { text-decoration:underline; }
#header { background-color:#BF9060;
border-bottom:3px solid #806C59;
padding:.2em .2em .2em .7em; }
#header h1 { font-size:12px;
padding:0;
margin:0;
font-weight:bolder;
color:#000; }
.sides { border-bottom:2px solid #CFDCE6;
background-color:#596F80;
margin-bottom:5px;
padding:.2em .2em .2em .7em;
clear:both; }
.sides ul { padding: 0; margin:0; }
.sides li { display:inline;
padding:0;
margin:0;
margin-right:3px; }
.sides a { font-size:12px;
text-decoration:none;
color:#FFF; }
.sides a:hover { text-decoration:underline; }
#right { float:right; width:70%; }
#left { margin-right:71%; }
.box { background-color:#406480;
margin-bottom:5px; }
.box h2 { padding:0; margin:0; color:#FFF; font-size:20px; border-bottom:1px solid #A07850; }
.boxcontent { padding:.5em;
margin:2px; }
b.rtop, b.rbottom { display:block; background-color:#36566D; }
b.rtop b, b.rbottom b { display:block; height:1px;
overflow:hidden; background-color:#406480; }
b.r1 { margin:0 5px; }
b.r2 { margin:0 3px; }
b.r3 { margin:0 2px; }
b.rtop b.r4, b.rbottom b.r4 { margin:0 1px; height:2px; }
</style>
</head>
<body>
<div id="header"><h1>The Shadow Fox Network - Your Resource for
Webmaster Articles and Tutorials on XHTML, PHP, CSS, XML, and Javascript.</h1></div>
<div class="sides">
<ul>
<li><a href="http://www.shadow-fox.net">Shadow Fox Network</a></li>
<li><a href="http://yoururl.com">Your site</a></li>
</ul>
</div>
<!--start right side-->
<div id="right">
<!--content-->
<div class="box">
<b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>
<div class="boxcontent">
Content can go here
</div>
<b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b>
</div>
<!--/content-->
</div>
<!--end right side-->
<!--start left side-->
<div id="left">
<!--nav-->
<div class="box">
<b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>
<div class="boxcontent">
<h2>Navigation</h2>
<ul>
<li><a href="#">Link</li></li>
</ul>
</div>
<b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b>
</div>
<!--/nav-->
<!--search-->
<div class="box">
<b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>
<div class="boxcontent">
<h2>Search</h2>
Form can go here
</div>
<b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b>
</div>
<!--/search-->
</div>
<!--end leftside-->
<div class="sides">
<ul>
<li><a href="http://www.shadow-fox.net">Shadow Fox Network</a></li>
<li><a href="http://yoururl.com">Your site</a></li>
</ul>
</div>
</body>
</html>
I added a bit of extra content, added an h2 customization for the header in the box, and I added a better link style, because the bright blue of the blue of the box hurt a bit.
Conclusion
Well, you survived this tutorial. Good job: it was hopefully worth it. You now should have a finished two column layout which should be pretty easy to customize in your own way. Go crazy with it!
Resources
To create the color scheme I used Color Schemer.