gap gap - 15 days ago 9
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

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 {
    width:220px;
    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.