0

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

Improve this question
4
  • 3
    Use media screen rule property of CSS For More
    – divy3993
    Commented May 18, 2015 at 3:01
  • Can you show the current HTML/CSS you're using for this?
    – Nathan Dawson
    Commented May 18, 2015 at 3:01
  • 1
    I have answered similar kind of question. Have a look at it. stackoverflow.com/questions/30190626/…
    – Jayababu
    Commented May 18, 2015 at 3:12
  • 1
    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
    Commented May 18, 2015 at 3:17

7 Answers 7

Reset to default
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..

Improve this answer
2
  • 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
    Commented May 18, 2015 at 4:07
  • 1
    I un-downvoted because this guy/gal really should be using bootstrap for this
    – plushyObject
    Commented May 19, 2015 at 14:35
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.

Improve this answer
1

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>

Improve this answer
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/

Improve this answer
1

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:

  1. Have a function get the width of the screen
  2. Run through each element that needs to be changed
  3. 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);
Improve this answer
1
  • 2
    Way too complex. You can simply use css @media rule to do all this.
    – Kevin M
    Commented May 18, 2015 at 3:16
1

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>
Improve this answer
1
  • if you are planning to use for multiple section, please use class instead of id.
    – Si8
    Commented Oct 27, 2021 at 16:03
1 

*{
    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>

Improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.