Question

<div class="main">
<div class="cleft">
</div>
<div class="cright">
</div>
</div>

.cleft{
    float: left;
    padding-left: 1%;
    width: 68%;
}

.cright{
    float: right;
    padding-right: 1%;
    width: 28%;
}

I have two box left and right. I want a thing that I want to put left and right box width:100% when someone resize the width and width are less then the main-container (1075px in my case).

How I can make 100% width of left and right and right will shown on bottom.

note: I have made some changes for ipad,iphone and they work fine in that case. but How I can applied for that thing when someone resize the browser.

Answer 1

I think you want to use media queries:

http://css-tricks.com/css-media-queries/

@media screen and (max-width: 1075px) {
   .cleft, .cright {
       float:none;
       width:50%;
       padding:none;
   }
}