CODEWITHSUNDEEP
htmlcssresponsive-design
Code
Code

Reputation: 303

Aligning div in responsive design

I am trying to align the div when the browser is reduced to 480px,

I have the below code in html,

<body>
<div id="container">
    <div id="leftcol"> left left left left left left left left left left left left left </div>
    <div id="rightcol"> right right right right right right right right right right right right </div>
    <div id="midcol"> mid mid mid mid mid mid mid mid mid mid mid mid mid mid mid  </div>
</div>
</body>

in css,

/* CSS Document */

 *{
margin:0;
padding:0;
  }

  #container {
width: 100%;
height: 600px;
background-color:#FFFF00;
  }

  #leftcol {
float:left;
width:20%;
height: 600px;
background-color:#FF0000;
   }


  #rightcol {
float:right;
width:20%;
height: 600px;
background-color:#0099FF;
  }

  #midcol {
height: 600px;
background-color:#339900;
  }


  @media screen and (max-width:480px) {
#container {
width: 100%;
height: auto;
background-color:#FFFF00;
  }

  #leftcol {
width:100%;
height: auto;
background-color:#FF0000;
  }


  #rightcol {
width:100%;
height: auto;
background-color:#0099FF;
  }

  #midcol {
height: auto;
background-color:#339900;
  }
 }

![enter image description here][1]

http://jsfiddle.net/sztQR/

In the image, i have left right and middle. What i want is, middle left and right

Is this possible?

Upvotes: 2

Views: 2367

Answers (1)

Tim Mac
Tim Mac

Reputation: 1149

How about this? It's using absolute positioning instead of floats, but you get the effect you want without any javascript...

Change the order of your div's...

    <div id="midcol"> mid mid mid mid mid mid mid mid mid mid mid mid mid mid mid  </div>
    <div id="leftcol"> left left left left left left left left left left left left left </div>
    <div id="rightcol"> right right right right right right right right right right right right </div>

Then change from floats to position:absolute... changing back to position:static when you hit 480px.

*{
    margin:0;
    padding:0;
}

#container {
    height: 600px;
    background-color:#FFFF00;
    margin: 0 20%;
}

#leftcol {
    position:absolute;
    left:0;
    top:0;
    width:20%;
    height: 600px;
    background-color:#FF0000;
}


#rightcol {
    position:absolute;
    right:0;
    top:0;
    width:20%;
    height: 600px;
    background-color:#0099FF;
}

#midcol {
    height: 600px;
    background-color:#339900;
}


@media screen and (max-width:480px) {
    #container {
        width: 100%;
        height: auto;
        margin:0;
        background-color:#FFFF00; }
    #leftcol {
        position:static;
        width:100%;
        height: auto;
        background-color:#FF0000;}
    #rightcol {
        width:100%;
        height: auto;
        background-color:#0099FF;
        position:static; }
    #midcol {
        height: auto;
        background-color:#339900; }
}

Upvotes: 3

Related Questions