CODEWITHSUNDEEP
htmlcssresponsive-design
Aerodynamika
Aerodynamika

Reputation: 8413

Responsive design 3 columns to 1?

I wanted to ask – if I have 3 columns of DIVs that I want to responsively change to 2 and 1 depending on the width of the user's screen (1 column for mobile devices) – what's the best way to do it? The div elements should simply stack under each other.

<div class="container">
    <div class="row">  
        <!--left-->
        <div class="col1">  
        </div>
        <!--/left-->

        <!--center-->
        <div class="col2">
        </div>
        <!--/center-->

        <!--right-->
        <div class="col3">
        </div>
        <!--/right-->
    </div>
</div>
<!-- /.container -->

Thank you!

PS My design looks like this:

enter image description here

To

enter image description here

Upvotes: 2

Views: 246

Answers (1)

jmore009
jmore009

Reputation: 12923

you can accomplish this with the float property. You'll just need to clear the floats by adding overflow:hidden to the parent or using a clearfix:

FLOAT EXAMPLE

CSS

.row{
    overflow: hidden;
}

.col{
    background: red;
    width: 200px;
    height: 200px;
    float: left;
    margin: 5px;
}

OR

You can use display: inline-block; to do the same

.col{
   background: red;
   width: 200px;
   height: 200px;
   display: inline-block;
   margin: 5px 2px;
}

INLINE-BLOCK EXAMPLE

Upvotes: 5

Related Questions