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.

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.

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.

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.

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.

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 – 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 – 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 – 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.

Joe Granados the author

Joe Granados is the owner 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