gap gap - 1 year ago 67
CSS Question

How do i divide my webpage into 3 columns with css, frameset in html makes up too many pages to handle, how can i do it in css?

i want my page to have 3 columns, with the left and right column to have the same width, and the center column to have the content and forms etc. i have full knowledge of html but jest started css.
the left and right column should be 220px each, and the center column to take the rest of the width. i want there to be a margin of 5px between all 3 columns and the window. also how do i add different backgrounds to the 3 columns - as i tried earlier but the backgrounds didnt come. also all 3 columns should take the whole height of the window (keeping in mind the 5px margin)

Thanks in advance!

Answer Source

I made you a fiddle here

And here the code: 1. HTML

<div id="left">text</div>
<div id="center">text</div>
<div id="right">text</div>

2. CSS

html, body {
    height: 100%;
    margin: 0;
div {
    height: 100%;
    background-color: red;
    float: left;
#left {
    margin: 5px;
#center {
    margin: 5px 0;
    width: calc(100% - 460px);
#right {
    margin: 5px;
    width: 220px;

I am using the calc() function for css. Quite new so not all browsers actually support it. You can find more details about support here

BTW: To change the background simply add

background-color: #000;

to a div and you change the color.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download