CODEWITHSUNDEEP
htmlcssdivision
gap
gap

Reputation: 15

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!

Upvotes: 1

Views: 21505

Answers (3)

user6875529
user6875529

Reputation: 101

Well, this would work, but why are you using classes for this?, it's something you wouldn't want to use in your website again so ID's would be better for this. Also to not mess up the width of the page, you better use % values, something like this.

The HTML

<div id="container">
  <div id="leftContent"></div>
  <div id="mainContent"></div>
  <div id="rightContent"></div>
</div>

and then the CSS

#leftContent {
  float:left;
  width: 30%;
  background-color: red;
 }

 #rightContent {
   float: right;
   width: 30%;
   background-color: green;
  }

 #mainContent {
    width: 30%
    float: right
    background-color: blue;
    margin: 1%;
    padding: 1%; //Not Required
  }

Of course the percentages for the width will vary depending on how your body/container width is setup.

Upvotes: 0

Paco
Paco

Reputation: 129

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.

Upvotes: 1

zsawaf
zsawaf

Reputation: 2011

I'm not sure this would work, since I'm just jotting this down at the top of my head, but I hope it helps.

CSS

.leftContent {
  float:left;
  width:220px;
  background-color: red;
  margin: 5px;
 }

 .rightContent {
   float:right;
   width:220px;
   background-color: green;
   margin: 5px;
  }

 .mainContent {
    padding: 15px; //optional
    background-color: blue;
  }

HTML

<div id="container">
  <div class="leftContent"></div>
  <div class="mainContent"></div>
  <div class="rightContent"></div>
</div>

Upvotes: 0

Related Questions