Create a 3 column fluid layout using HTML/CSS

Hey there fellow designers and coders. Here on Webdevtuts I have been posting a lot of Photoshop tutorials and that is great for designers but what about the people who would like to learn code. Since I have not written a tutorial on code I decided to open up Notepad++ and create something useful for you all. Today I will be teaching you how to create a Fluid 3 column layout using HTML & CSS.

The HTML

When starting website I always start with the basic HTML tags such as the Head, Title, and Body tags. Then I’ve added some divs and gave them all a custom name. I give them all a custom name so I can later define them in the stylesheet.

  • Masthead: – Section will contain and hold all logo, and header information.
  • Container – Container will contain and hold all content and columns

Copy and paste the layout below into notepad or dreamweaver(whatever program you use for coding) and save it as index.html.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>Title Goes Here</title>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div id="masthead">

</div><!--end masthead-->

<div id="container">

</div><!--end container-->



</body>

</html>

More divs

For the Masthead section we will insert two divs. The first div we will enter is logo. The logo div will contain our logo. Then we will enter another div right below it and name it header. The header div will be for our header text and slogan.

Copy and paste the code below inside of the Masthead div.

<div id="logo">
</div><!--end logo-->
	
<div id="header">
</div><!--end header-->

Now that we have our header section taken care of we will now insert our container divs. Create 3 divs, left_col, right_col, and page_content.

  • left_col: – This will contain/hold all left column text and information.
  • right_col: – This will contain/hold all right column text and information.
  • page_content: – This will contain/hold all main column text and information.
<div id="left_col">
</div><!--end left_col-->
	
<div id="right_col">
</div><!--end right_col-->
	
<div id="page_content">
</div><!--end page_content-->

Our final div will be out footer div. We do not want to place the footer inside of our container tag because we would like for it to span across out entire screen. Also I always place it outside of the container so it can stay at the bottom of the page. Create a new div and call it footer.

copy in paste code below after the end of the container div.

<div id="footer">
</div><!--end footer-->

Before we begin styling our page we will need to add some text. Google search lorem ispum and you find loads of gibberish text that you can use for this tutorial. Here is what the html looks like with the text.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>3 Column Layout | Webdevtuts</title>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div id="masthead">
	<div id="logo">
	<h1>Logo</h1>
	</div><!--end logo-->
	
	<div id="header">
	<h1>This is Your Header</h1>
	<p>This is your header</p>
	</div><!--end header-->
</div><!--end masthead-->

<div id="container">
	<div id="left_col">
	<h1>Left Column</h1>
	<p>
	There are many variations of passages of Lorem Ipsum available, but the majority have 
	suffered alteration in some form, by injected humour, or randomised words which don't 
	look even slightly believable. If you are going to use a passage of Lorem Ipsum, you 
	need to be sure there isn't anything embarrassing hidden in the middle of text. All the 
	Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, 
	making this the first true generator on the Internet. It uses a dictionary of over 200 
	Latin words, combined with a handful of model sentence structures, to generate Lorem 
	Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from 
	repetition, injected humour, or non-characteristic words etc.
	</p>
	</div><!--end left_col-->
	
	<div id="right_col">
	<h1>Right Column</h1>
	<p>
	There are many variations of passages of Lorem Ipsum available, but the majority have 
	suffered alteration in some form, by injected humour, or randomised words which don't 
	look even slightly believable. If you are going to use a passage of Lorem Ipsum, you 
	need to be sure there isn't anything embarrassing hidden in the middle of text. All the 
	Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, 
	making this the first true generator on the Internet. It uses a dictionary of over 200 
	Latin words, combined with a handful of model sentence structures, to generate Lorem 
	Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from 
	repetition, injected humour, or non-characteristic words etc.
	</p>
	</div><!--end right_col-->
	
	<div id="page_content">
	<h1>Main Column</h1>
	<p>
	Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of 
	classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin 
	professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, 
	consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, 
	discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum 
	et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the 
	theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor 
	sit amet..", comes from a line in section 1.10.32.
	</p>
	
	<p>
	Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of 
	classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin 
	professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, 
	consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, 
	discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum 
	et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the 
	theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor 
	sit amet..", comes from a line in section 1.10.32.
	</p>

	<p>
	Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of 
	classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin 
	professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, 
	consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, 
	discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum 
	et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the 
	theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor 
	sit amet..", comes from a line in section 1.10.32.
	</p>
	</div><!--end page_content-->
</div><!--end container-->

<div id="footer">
<p>&copy; 2010 to Webdevtuts. All rights reserved.</p>
</div><!--end footer-->

</body>

</html>

The Css

Ok now that we have the html taken care of its time to do the dirty work. It is now time to style our 3 column web layout. Before we begin styling have to go over something really fast. In a normal website layout many people use fixed layouts but for this tutorial I am using a fluid layout.

  • Fixed: – Layout is the same width and all browsers. Majority of websites use this method
  • Fluid: – Layout re-sizes to users screen. Not many people use this method because it is hard styling for it but in the long
    run it’s well worth it

Copy and Paste the code below into your stylesheet. I will explain each one below.

body {
	margin: 0;
	padding: 0;
}

#masthead {
	min-width: 600px;
	background:teal;
}

#logo {
	float: left;
	width: 200px;
	background:orange;
}

#header {
	margin-left:200px;
	background:olive;
}
  • body – Body class define the entire page seen on a screen. It has a margin, and padding of zero so all presets and others styles can also be set at 0.
  • masthead – The masthead has a min-width of 600px which means it will never get smaller then 600px. Also it has no padding, borders, or margins.
  • logo – Logo is floated to the left side of the page and has a width of 200px
  • Header – Since we’re using a fluid layout we will not give the header a fixed width because we want it to re-size according to the users screen size. So we’ve added a margin to the left of 200px which gives us space from the left side of the page.

Now we will style our container and everything inside of it. Copy the css below and add it to your stylesheet.


#container {
	clear: both;
	min-width: 600px;
}

#left_col {
	float: left;
	width: 200px;
	background:grey;
}

#right_col {
	float: right;
	width: 200px;
	background:grey;
}

#page_content {
	margin-left: 200px;
	margin-right: 200px;
	background:red;
}
  • container – Container id defines the container which holds all the content and both sidebars. I has a min-width of 600px which means it will not get any smaller than 600px. It also clears all floats to the left and right. Does not hold footer
  • Left_col – The left column is floated to the left side of the page and has a width of 200px
  • right_col – The right column is floated to the right side of the page and has a width of 200px
  • page_content – Since we’re using a fluid layout we will not give the page content a fixed width because we want it to re-size according to the users screen size. So we’ve added a margin to the left and right of 200px which gives us space from the left and right side of the page.

The Footer

The footer is the last part to are 3 column layout. Copy the code below into your stylesheet and I will explain it below.

#footer {
	clear: both;
	background:teal;
}
  • footer – The footer is at the bottom of the page and has no width nor height applied to it because it usually is just a line of text. It has a style of clear both which mean to clear both the left and right and then pushes the footer down to the bottom of the page.

There you go. You should now have a 3 column layout that adjusts to all screen sizes. I hope this tutorial has helped you understand how to create a fluid 3 column layout. Thanks for following this tutorial.

Razvan Sava the author

Razvan is the founder of Webdevtuts. He is also a web designer & developer who loves to design and develop websites. If you're looking for him you can find him via @webdevtuts
  1. seyoum says:

    well this is really nice. but i would like to know how can i control the ff trouble I need to measure all in times of %

    #outer_container {
    position: relative; /* is there any better method*/
    width: 80%;
    /* height: 1000px; */ how can i control this height?
    margin: 0 auto;
    background-color: #369;
    padding: 10px;
    border: solid 1px black;
    }
    /* I need to create three boxes with in the container i don’t need in terms of px rather % pls try to help me who understands my problem*/
    #first {
    position: absolute;
    top: ??%;
    left: ??%;
    background-color: #ccf;
    float: left;
    width: 10%
    padding: 8px;
    }

    #second {
    position: absolute;
    top: ??%;
    left: ???%;
    background-color: #fcc;
    float: ??%;
    width: 60%;
    padding: 15px;
    }

    #third {
    position: absolute;
    top: ??%;
    left: ??%;
    background-color: #cff;
    width: 10%;
    padding: 15px;
    }

    /*p.clear {
    clear: both;
    height: 0;
    margin: 0;
    padding: 0;
    }*/

    • You can set height to % if you would like or auto but I am not sure how that would work. It would be based on your css. Also the position relative is needed because once the browser size is re-sized to a lower resolution’s your container or div will need to stay relative to its current positioning.

Leave a Reply