Free Online Courses for Software Developers - MrBool
× Please, log in to give us a feedback. Click here to login
×

You must be logged to download. Click here to login

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

How to build a 3-Column website design with CSS/HTML

We will learn today how to create a 3-column layout making use of HTML & CSS and the benefit of the same over fixed layout.

The HTML

We all are aware that when we build a website, the basic fundamentals we follow are the HTML tags that could comprise of Head, Title, and Body tags. We could also incorporate some divs and then provide them with a custom name. After providing with the custom name, we can then define the same in the style sheet.

Let us have a look at the fields present in the style sheet.

Masthead: This section will comprise of the details such as logo, and all information pertaining to the header.

Container – It has the ability to contain and hold all content and columns

Let us copy and paste the layout that is given below into a notepad. You could also make use of dream weaver or any other program that you are using for your coding stuff. Post doing this, you need to save this as index.html.

Listing 1: Illustrating the layout

<html>
<head>
<title>Here Comes the Title</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>

A Look at Some more Divs

We will incorporate two divs as far as the Masthead section is concerned.

  • Logo would be the first div that we will add in and the logo div will comprise of the logo.
  • There would be one more div that would be right below the logo and we would name it as a header.
  • The header div will be for our header text and slogan.

The next step is to copy-paste the code that is mentioned below inside of the Masthead div.

Listing 2: Illustrating the Masthead div

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

Concluding, we now have the header section that is being managed, the other important task would be to insert our container divs. You need to create 3 divs- 1. left_col, 2. right_col, 3.page_content.

The left_col will comprise/hold all left column text and information whereas the right_col will contain/hold all right column text and information. Talking about the page_content, it has the potential to comprise or hold all main column text and information.

Listing 3: Creating three divs

<div id="left_col">
</div><!--end left_col-->
 
<div id="right_col">
</div><!--end right_col-->
 
<div id="page_content">
</div><!--end page_content-->

The final dev would be out footer div and we would not be placing the footer inside of the container tag. The simple reason for the same is that we require it to expand it across the entire screen. Also, we place it outside of the container for the reason that it can stay at the bottom of the page. Let us create one new div and call it footer.

We would need to copy-paste the code mentioned below and that too after the end of the container div.

Listing 4: Creating a new dev

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

A Glance at the Css

Assuming we have added the text, we will now design the 3 column web layout. Talking about the normal websites that we visit daily, people have the tendency to make use of fixed layouts however we will be making use of a fluid layout.

Difference between Fixed and Fluid Layou

t:

In Fixed layout, there is no difference in the width and all browsers and majority of the websites that we come across are making use of this method. Whereas on the other hand, Fluid layout is the method that re-sizes the screen of the users and the reason why people do not make use of this very often is the difficulty to implement or style them, but will really help in the long run.

Let us now copy-paste the code below into the style sheet

Listing 5: Illustrating the Fluid layout

body {
    margin: 0;
    padding: 0;
}
 
#masthead {
    min-width: 600px;
    background:teal;
}
 
#logo {
    float: left;
    width: 200px;
    background:orange;
}
 
#header {
    margin-left:200px;
    background:olive;
}

Explanation of the code:

  • The intent of the body class is to define the entire page seen on a screen and it comprises of a margin, and padding of zero. Hence all presets and others styles can also be set at 0.
  • If you notice, we have a masthead that has a minimum width of 600px. This means that it will never reach below 600px, it has no padding, borders, or margins.
  • Logo having a width of 200px is floated to the left side of the page.
  • We have not provided a fixed width for the reason that we are making use of a fluid layout here and need to re-size it as per the screen size of the user. For this reason, a margin has been added to the left of 200px. This would give us a space from the left side of the page.

Let us style our container and everything inside of it by copying the css below and then incorporating it the style sheet.

Listing 6: Styling the container

#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 id is made use of to define the container that is used to hold the entire content as well as both sidebars. With the minimum width of 600px, it will not become smaller than 600px.
  • Talking about the left column (Left_Col), it is floated to the left side of the page with a width of 200px. For the right_col, this is floated to the right side of the page with a width of 200px
  • Again because, we are not using a fixed layout, we will make use of a fluid layout and re-size it according to the users screen size. Therefore, a margin has been added to the left and right of 200px. This again provided us with a space from the left and right side of the page.

The Footer

We have come to a last part of a column layout i.e. Footer. You need to copy the code below into the style sheet.

Listing 7: Illustrating the Footer code

#footer {
    clear: both;
    background:teal;
}

We always find footer at the bottom of the page. Here it has neither width nor height applied to it. This is for the reason that it is considered just a line of text. The style mentioned here is clear that is meant to clear both the left and right. Post doing this it then pushes the footer down to the bottom of the page.

Conclusion

We learned how to have a 3 column layout that has the potential to adjust to all screen sizes. Hope you liked the article.



I am a software developer from India with hands on experience on java, html for over 5 years.

What did you think of this post?
Services
[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login