Grow your CSS skills. Land your dream job.

3 columns layout, broken when resize the browser

  • # March 26, 2013 at 6:14 am

    Example:
    wrapper: width:980px;border:1px solid red;margin: 0 auto;overflow:hidden
    inside wrapper i have 3 divs called sec.
    sec: width:324px;border:1px solid green;float:left

    When am resizing the browser, the 3rd columns coming down. Could anyone tel me , whts the issue is?

    I wanna fix this in px, dont want in liquid layout.

    # March 26, 2013 at 6:22 am

    Your code works for me…

    #wrapper
    {
    width:980px;
    border:1px solid red;
    margin: 0 auto;
    overflow:hidden;
    }
    #sec
    {
    width:324px;
    height:100px;
    border:1px solid green;
    float:left;
    }

    # March 26, 2013 at 6:41 am

    The borders you have applied will actually make the all the boxes larger than you have set them.

    Basically, unless you apply a box-sizing property the ‘sec’ boxes will be 326px wide being made up of 324+1+1 (width + left border+ right border).

    Therefore, if you set the width of the wrapper to 978 (and so actually 978 + 1 +1 ), everything will fit neatly because 326 *3 = 978 and you get this: http://codepen.io/Paulie-D/pen/cHadI

    # March 26, 2013 at 7:10 am

    Ya thanks, could u just try this, wrapper = 1000 put border. inside tht give 3 equivalent div’s with border and space. And then you resize the browser, problem will occur. Just skip my code and try this new one.

    # March 26, 2013 at 7:26 am

    Why don’t you try it….just fork the Codepen I gave you and play away.

    You’ll just have to work on your math.

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".