difficulty in creating simple layout with CSS

Question

I want to create a content section in in my web page in three columns: 1 column with fixed width of 250px on left side of page, 1 column with fixed width of 250px on right side of page and a column in center of them which should resize according to the browser width. I don't want to use bootstrap because there is no option of fixed width in that.

Possible duplicate of [How to make a div to fill a remaining horizontal space?](http://stackoverflow.com/questions/1032914/how-to-make-a-div-to-fill-a-remaining-horizontal-space) — Kaan Burak Sener, Jan 21 '17 at 21:13

score 0 · Answer 1 · answered Jan 21 '17 at 21:23

0

You can try something like this ;)

#div1 {
  width: 25vw;
  height: 100vh;
  background: red;
}

#div2 {
  height: 100vh;
  margin-left: 25vw;
  width:50vw;
  margin-top:-100vh;
  background: green;
}

#div3 {
  width: 35vh;
  height: 100vh;
  margin-top:-100vh;
  margin-left: 75vw;
  background: blue;
}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width">
        <title>repl.it</title>
        <script src="index.js"></script>
        <link href="index.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
    <div id="div1"></div>
    <div id="div2"></div>
    <div id="div3"></div>
    </body>
</html>

answered Jan 21 '17 at 21:23

Razvan Alex

1,706
2
18
21

Hi Razvan Alex, your result is almost related to my expectations. but i found a related layout at w3school.com - http://www.w3schools.com/html/default.asp -. as i am a beginner so I could not understand the source code of page can you please simply describe this responsive layout in code.. please... – M. Ibrar Jan 22 '17 at 18:33
Hey, the responsive design is given by the `vw` and `vh`. If you check the documentation, 1vh/vw = 1% of the total screen width/height ;). Hope that helped you out – Razvan Alex Jan 22 '17 at 18:36

score 0 · Answer 2 · answered Jan 21 '17 at 21:33

0

It is probably easier to do this with a table element:

<table style="width:100%;height:100%;text-align:center">
<tr>
<td style="width:250px; background-color:red">
<h1>Column One</h1>
</td>
<td style="background-color:green">
<h1>Column Two</h1>
</td>
<td style="width:250px;background-color:blue">
<h1>Column Three</h1>
</td>
</tr>
</table>

answered Jan 21 '17 at 21:33

Larry Gillstrom

25
5

yes you got me idea what i exactly i want but i dont want to use table becouse div is take less time to get fetched. so dive is more seo friendly – M. Ibrar Jan 22 '17 at 18:20

Tha'er AlAjlouni ثائر العجلوني · Accepted Answer · 2017-01-21T21:42:51.240

You can achieve that using absolute positioning, see this as an example:

.main {
  position: relative;
  margin: 0;
  padding: 0;
  height: 100vh;
  width: 100%;
}
.left,
.right {
  position: absolute;
  width: 250px;
  background: pink;
  top: 0;
  bottom: 0;
  margin: 0;
}
.left {
  left: 0;
}
.right {
  right: 0;
}
.middle {
  margin: 0 250px;
}

<div class="main">
  <div class="left">
    left
  </div>
  <div class="middle">
    middle
  </div>
  <div class="right">
    right
  </div>
</div>

difficulty in creating simple layout with CSS

3 Answers3