0

Making 3 column responsive design using media queries is simple, but in case I want the middle column to stay in mid with 100% height and the right column goes on the left column it gets tricky.

The problem emerge because mid column height is variable, therefore it will be impossible to give negative margin-top to the transformed right column.

here is css code example:

/* 3 columns css */
.colLeft, .colRight, .colMid{
   width: 280px;
   float: left;
}
.colMid{
   width: 500px;
}
.colRight{
   width: 240px;
}
.container{
width: 1020px;
   margin: 0 auto;
}

/* Media queries */
@media screen and (max-width: 1020px) {
.container {
    width: 780px!important;
}
    .rightCol{
        width: 280px;
    }
}

Html:

<div class="container">
    <div class="leftCol">
    </div>

    <div class="midCol">
    </div>
    <div class="rightCol">
    </div>
</div>

this code works fine, But mid column height push the transformed right column down. My question: Is there HTML/CSS solution for this issue? or do I have to change HTML rendering when screen re-size?

Thanks,

2 Answers 2

0

Looks like your float: left is being applied to your .colRight class. This could be what is causing your right column to display on your left column.

1
  • 1
    My friend that what I am intending to.. to make it responsive Feb 17, 2015 at 17:35
0

I found the solution, using only CSS/HTML. Here is the explanation:

  • I created a duplicate rightCol div and placed it inside leftCol div, and named it righCol-left.

    Initially the rightCol-left is set to "display:none"

  • when media screen is lower than 1020px, hide rightCol (display:none), and display rightCol-left (display:block)

here is the CSS:

.rightCol-left{display:none;}     /*duplicate div*/

@media screen and (max-width: 1020px) {
    .container {
        width:780px!important;
    }
    .rightCol{
        display:none;
    }
    .rightCol-left{
        display:block;
        width:280px;
    }
}

here is the HTML:

<div class="leftCol">
    /*Left column content*/

    <div class="rightCol-left">  /* will be displayed when screen is below 1020px */
    </div>
</div>

<div class="midCol">
    /* mid column content */
</div>

<div class="rightCol">  /* gets hidden when screen is below 1020px */
</div>

This works perfect, the only bad thing would be the repeated HTML code. But this is not noticeable and very minor, after all, HTML code produce far less load to the webpage compared to JavaScript or anything else.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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