Grow your CSS skills. Land your dream job.

Responsive layout

  • # July 6, 2013 at 9:07 am

    Hi!

    i want to two fixed width colum and one colum flexiable(responsive div),(http://oi42.tinypic.com/dwmcw.jpg) how to write css, plz help me

    # July 6, 2013 at 10:55 am

    What have you tried so far?

    # July 6, 2013 at 12:37 pm

    I have done something similar in the past (two fixed columns on the left).
    Both fixed-width columns were floated left and all columns had were `position: relative`.
    I tried this but for some reason it wasn’t working; the floats were acting weirdly…

    What might be easier for you is to position them both absolutely or fixed and then just give the underlying div 160px left and right padding.

    http://codepen.io/Druid-of-Luhn/pen/zwfEg

    # July 8, 2013 at 7:57 am

    Hi cynewatch,

    Thanks yours code :)
    Fixed this way

    **My Html**

    `

    left

    right

    `

    **My CSS**

    .g_container{width:100%;
    height:auto;
    margin:0 auto;
    display:block;
    position:relative;
    }
    .g_left{
    width:160px;
    height:600px;
    position:fixed;
    background:#F00;
    top:0;
    left:0;
    }
    .g_right{width:160px;
    height:600px;
    position:fixed;
    background:#F00;
    top:0;
    right:20px;}

    .g_middle{
    width:100%;
    padding:0px 180px;
    height:auto;
    min-height:600px;

    }
    .g_middle img{max-width:100%;
    height:auto;
    }

    # July 8, 2013 at 8:01 am

    Sorry, previous css not working

    **This css working**

    .g_container{width:100%;
    height:auto;
    margin:0 auto;
    display:block;
    position:relative;
    }
    .g_left{
    width:160px;
    height:600px;
    position:fixed;
    background:#F00;
    top:0;
    left:0;
    }
    .g_right{width:160px;
    height:600px;
    position:fixed;
    background:#F00;
    top:0;
    right:20px;}

    .g_middle{

    padding:0px 180px;
    height:auto;
    min-height:600px;

    }
    .g_middle img{max-width:100%;
    height:auto;
    }

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".