Making three-column HTML responsive

Question

My page width is 960px and I have 3 divs on it in a horizontal manner that collectively take 100% of the width.

When the page width is decreased, I want the divs to be arranged in a vertical manner.

How can I do it in CSS ??

enter image description here

Use media screen rule property of CSS [For More](http://www.w3schools.com/cssref/css3_pr_mediaquery.asp) — divy3993, May 18 '15 at 03:01
I have answered similar kind of question. Have a look at it. http://stackoverflow.com/questions/30190626/wrap-when-the-browser-width-is-too-short-to-have-everything-inline/30191089#30191089 — Jayababu, May 18 '15 at 03:12
I agree with @media rules, it's the easiest and most professional way, no JavaScript required. Have a look at my answer below. — Kevin M, May 18 '15 at 03:17

Jahid · Answer 1 · 2015-05-18T04:16:01.013

2

If you don't mind using bootstrap:

<div class="row">
<div class="col-md-4"></div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
</div>

This will create a row with three equal size responsive columns..

edited May 18 '15 at 04:16

answered May 18 '15 at 03:46

Jahid

21,542
10
90
108

You need to change the class to col-md-4, because the way it currently is shown will actually split it into 3 columns on mobile as well as desktop which is not what was requested in the OP – plushyObject May 18 '15 at 04:07
1

I un-downvoted because this guy/gal really should be using bootstrap for this – plushyObject May 19 '15 at 14:35

score 1 · Answer 2 · answered May 18 '15 at 03:09

Fiddle Here

One simple way of doing it is to toggle the float property using a media query. For body width > 960px, have them float left. Otherwise, let them line up normally as blocks.

div {
  width: 33.3333%;
  box-sizing: border-box;
  float: none;
  margin-bottom: 25px;
  padding: 25px;
}
span {
  display: block;
  height: 200px;
  background: red;
}
@media (min-width: 960px) {
  div {
    float: left;
  }
}

<div> <span></span>

</div>
<div><span></span>

</div>
<div><span></span>

</div>

score 1 · Answer 3 · answered May 18 '15 at 03:09

1

create the div for these 3 divs set the width to 100% use float: left; and position:relative; in the css

or you can use bootstrap http://getbootstrap.com/

answered May 18 '15 at 03:09

Derek Anas

37
9

score 1 · Answer 4 · edited May 23 '17 at 11:46

First, apply the same class to all the divisions.

<div class="nm">

Then, from How to get browser width using javascript code?, get the width of the screen with

function getWidth() {
  if (self.innerHeight) {
    return self.innerWidth;
  }

  if (document.documentElement && document.documentElement.clientHeight) {
    return document.documentElement.clientWidth;
  }

  if (document.body) {
    return document.body.clientWidth;
  }
}

And then change it depending on the width.

var value = 400;
if(getWidth() < value){
  var foo = document.getElementByClassName("nm");
  for(var i=0, j=foo.length; i<j; i++){
    foo[i].style.float = "none";
  }
}

To break it down:

Have a function get the width of the screen
Run through each element that needs to be changed
Change the CSS to remove the horizontal alignment.

Additionally, if you want to change it whenever the user stretches or pulls the browser, you can create a setInterval loop.

function doInterval(){
    var value = 400;
    if(getWidth() < value){
      var foo = document.getElementByClassName("nm");
      for(var i=0, j=foo.length; i<j; i++){
        foo[i].style.float = "none";
      }
    }
}

intv = setInterval(doInterval, 250);

Way too complex. You can simply use css @media rule to do all this. — Kevin M, May 18 '15 at 03:16

Kevin M · Accepted Answer · 2015-05-18T04:54:28.820

1

In css you can make use of media rules. For example, you can set new CSS styles, if the screen size goes below a certain width. In the case below it's set to use the new css rules once the width goes below 960px.

@media only screen and (max-width: 960px) {
    .test-div {
        float:none;
    }
}

here is a full fiddle: http://jsfiddle.net/pckphv38/

simply resize your browser and see.

edited May 18 '15 at 04:54

answered May 18 '15 at 03:15

Kevin M

1,202
15
30

score 1 · Answer 6 · answered May 18 '15 at 03:47

Way to arrange the elements in CSS3

(no effect in IE10 and earlier versions)

<!DOCTYPE html>
<html>
    <head>
      <meta http-equiv="content-type" content="text/html; charset=UTF-8">
      <title>demo</title>

        <style type='text/css'>
           #ctr {
              display: -webkit-flex;
              -webkit-flex-direction: column;
               display: flex;
               flex-direction: column;
            }

            .item {
                width:100px;
                height:100px;
                background-color:pink;
                margin:2px;
            }

            @media (min-width: 960px) {
                #ctr {
                    display: -webkit-flex;
                    -webkit-flex-direction: row;
                    display: flex;
                    flex-direction: row;
                }
            }
        </style>

    </head>
    <body>
      <div id="ctr">
        <div class="item">a</div>
        <div class="item">b</div>
        <div class="item">c</div>
        </div>
    </body>
</html>

if you are planning to use for multiple section, please use `class` instead of `id`. — Si8, Oct 27 '21 at 16:03

score 1 · Answer 7 · answered May 18 '15 at 05:27

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

.wrap960{
    max-width: 960px;
    margin: 0 auto;    
}
.box{
    display: inline-block;
    *display: inline;
    zoom: 1;
    vertical-align: top;
    width: 31%;
    min-width: 250px;
    margin: 1%;
    border: 2px solid #f00;
    min-height: 200px;
    text-align: center;
    line-height: 200px;
}


@media only screen and (max-width: 960px) {
    .box{
        display: block;
        margin: 1% auto 0 auto;
    }
}

<div class="wrap960">
    <div class="box">box1</div>
    <div class="box">box2</div>
    <div class="box">box3</div>
</div>

Making three-column HTML responsive

7 Answers7