3 column page layout using div and css

Question

I want to create a page in asp.net where I need to divide the page into 3 columns each of differnt width(20%,60%,20%), each column's height should extend upto the maximun page height.
I dont want to use position:absolute and using left,top attributes to position the div tags, as some people are saying that using position:absolute is not good and it'll create problems over other browsers. Please extend me help in this regard, any diferent solutions over this. :)

have you tried to create it your self ? – SpiderCode Mar 27 '14 at 06:34 — SpiderCode, Mar 27 '14 at 06:34

score 1 · Accepted Answer · edited Mar 27 '14 at 06:49

1

Here is the html

<div class="width20">
   Div with width 20%
</div>
<div class="width60">
   Div with width 60%
</div>
<div class="width20">
   Div with width 20%
</div>

Here is CSS

body {
  margin:0;
  padding:0;
}
.width20 {
  float:left;
  width:20%;
  background:grey;
  height:100vh;
}
.width60 {
  float:left;
  width:60%;
  background:orange;
  height:100vh;
}

Example

edited Mar 27 '14 at 06:49

Barnee

3,212
8
41
53

answered Mar 27 '14 at 06:43

Rohit

324
2
9

---> u said height:100vh; but it is saying tat "100vh" is not a valid value for height property. – krishna Mar 27 '14 at 07:54
hi can you clarify? as if you click on example below the css code link it fulfill your requirement.. Also please review to [link](http://stackoverflow.com/questions/1575141/make-div-100-height-of-browser-window)...Even if you have some issue please share and i will be more than happy to help.... Thanks – Rohit Mar 27 '14 at 08:00

score 0 · Answer 2 · edited Mar 27 '14 at 06:47

0

HTML

<div class="container">
    <div class="grid_1">
        <p>20%</p>
    </div>
    <div class="grid_2">
        <p>60%</p>
    </div>
    <div class="grid_1">
        <p>20%</p>
    </div>
    <div class="clear">&nbsp;</div>
</div>

CSS

.container {
    background-color: #333333;

    width: 100%;
}

.grid_1{
    display: inline;
    float: left;
    width: 20%;
    position: relative;
}

.grid_2{
    display: inline;
    float: left;
    width: 60%;
    position: relative;
}

p {
    border: 1px solid #333333;
    padding: 10px;
    background-color: #FFFFFF;
}

.clear {
    clear: both;
    display: block;
    height: 0;
    overflow: hidden;
    visibility: hidden;
    width: 0;
}

fiddle

edited Mar 27 '14 at 06:47

Barnee

3,212
8
41
53

answered Mar 27 '14 at 06:40

Evgeniy

2,915
3
21
35

what abt the height, i want the height to fill the entire page. plz help. – krishna Mar 27 '14 at 07:55
+ html,body,.container,.grid_1,.grid_2{ height: 100% } – Evgeniy Mar 27 '14 at 09:38

score 0 · Answer 3 · answered Mar 27 '14 at 06:53

  <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        html,body{
            width: 100%;
            height: 100%;
            margin: 0%;
        }
        #one{
            width: 20%;
            height: 100%;
            float: left;
            background-color: red;
        }
        #two{
            width: 60%;
            height: 100%;
            float: left;
            background-color: green;
        }
        #three{
            width: 20%;
            height: 100%;
            float: left;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div id="one"></div>
    <div id="two"></div>
    <div id="three"></div>
</body>

score 0 · Answer 4 · answered Mar 27 '14 at 06:55

Use div tags with float left; it will help you.

HTML

<div class="first"></div>
<div class="second"></div>
<div class="third"></div>

CSS

body{
    height:100%;
    min-height:100%;
    width:100%;
    position:absolute;
}
.first{
    background-color:red;
    width:20%;
    height:100%;
    float:left;
    position:relative;
}
.second{
    background-color:yellow;
    width:60%;
    height:100%;
    float:left;
    position:relative;
}
.third{
    background-color:green;
    width:20%;
    height:100%;
    float:left;
    position:relative;
}

DEMO CODE

score 0 · Answer 5 · answered Mar 27 '14 at 08:01

You could use something like this: JSFiddle

HTML

<div id="content">
    <div class="side-bar">Content</div>
    <div class="main-content">main Content</div>
   <div class="side-bar">Content</div>
</div>

CSS:

#content {
    width:100% height:100%;
    position:relative;
    display:table;
}
.main-content {
    background:#ccc;
    height:100%;
    width:60%;
    display:table-cell;
}
.side-bar {
    width:20%;
    background:#eee;
    height:100%;
    vertical-align:top;
    display:table-cell;
}

Hope this helps

3 column page layout using div and css

5 Answers5