CODEWITHSUNDEEP
htmlcssresponsive-design
Gissipi_453
Gissipi_453

Reputation: 1330

Making three-column HTML responsive

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

Upvotes: 0

Views: 3679

Answers (7)

Dmitriy
Dmitriy

Reputation: 4503

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

Upvotes: 1

Kevin M
Kevin M

Reputation: 1312

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.

Upvotes: 1

Jahid
Jahid

Reputation: 22428

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..

Upvotes: 2

Howard Wang
Howard Wang

Reputation: 601

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>

Upvotes: 1

user2490157
user2490157

Reputation:

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);

Upvotes: 1

Derek Anas
Derek Anas

Reputation: 37

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/

Upvotes: 1

Will Reese
Will Reese

Reputation: 2841

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>

Upvotes: 1

Related Questions