CODEWITHSUNDEEP
css
user3308205
user3308205

Reputation: 35

How do I make a responsive 3 column website?

I am trying to make a 3 column website. Left and right columns are small 240px divs attached to the sides. The middle div is a stretchable area where all the elements inside stretch according to the size of the browser.

So far I have it set up like this : 

body, html {
height:100%;
} 

body {
margin:0;
}

 .container {
  background:orange;
  height:100%;
  width:100%;
  overflow:hidden;
 }

.left {
  width:240px;
  height:100%;
  background:rgba(0,0,0,0.5);
  position:absolute;
  top:0;
  left:0;

 }

.middle {
  width:100%;
  height:100%;
  background:orange;
  }

.right {
  width:240px;
  height:100%;
  background:rgba(0,0,0,0.5);
  position:absolute;
  top:0;
  right:0;
  }

And: 

 <div class="container">

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

     // all the content

  </div>
  <div class="right"></div>

  </div><!--container-->

How do I make the content in the middle column stay in between the left and right columns? I was thinking to use margin-left and margin-right but I feel it is not a good way of doing it.

Live:

http://codepen.io/daydreamer/pen/0479cc8de929cedc2ac519280a3044aa

Upvotes: 0

Views: 90

Answers (3)

god_is_love
god_is_love

Reputation: 609

Use Twitter Bootstrap to do n-column design and it will save you a lot of work. Right click on inspect the HTML code on the example page I provided and you'll see that all you need to do is set classes to a few div's and it works when you include the bootstrap JS/CSS files.

Upvotes: 0

moettinger
moettinger

Reputation: 5196

If you are supporting modern browsers, I would try using flexbox:

.container {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;  
}
.container div {
  flex-grow: 1; 
  height: 50px;
}
.side {
  max-width: 240px;
  min-width: 240px;
  background: red;
}

<div class="container">
  <div class="side"></div>
  <div class="middle">
     // all the content
  </div>
  <div class="side"></div>
</div>

jsfiddle example

Flexbox resource

Upvotes: 1

Timothy Smith
Timothy Smith

Reputation: 848

You don't need to use margin-left, but margin-right would be useful. I would use float: left and get rid of position: absolute on the left sidebar, and use margin-right: 240px and get rid of width: 100% on the middle div.

CSS:

.left {
  width:240px;
  height:100%;
  background:rgba(0,0,0,0.5);
  top:0;
  left:0;
  float:left;
}

.middle {
  height:100%;
  background:orange;
  margin-right: 240px;
}

.right {
  width:240px;
  height:100%;
  background:rgba(0,0,0,0.5);
  position:absolute;
  top:0;
  right:0;
}

Upvotes: 0

Related Questions