Grow your CSS skills. Land your dream job.

Annoying layout issue.

  • jev
    # April 26, 2013 at 10:54 am

    Hey guys,

    I have an issue with two column layout. Here is the issue replicated on codepen [http://codepen.io/jevg/pen/DHzEf](http://codepen.io/jevg/pen/DHzEf “Example”). The thing is that when clicking expand block number 4 is moved down. Is there any way to make it sit just under block number 2 without wrapping columns with additional divs?

    Thanks in advance.

    # April 26, 2013 at 11:00 am

    Not really…sorry.

    However, you have called it a ‘two column’ layout but, in fact, it isn’t.

    It’s a ‘one column’ layout but each ‘section’ only uses c.50% of the width.

    Hmmm…flexbox?

    # April 27, 2013 at 5:18 am

    Flexbox might work but isn’t practical to use yet.

    Things flow in lines in CSS so when you have two inline or floated elements on the same line then the next line begins after the tallest element as that is the height of the line. So that very much prevents what you want.

    However depending on your situatation you can survive with just one additional container: http://codepen.io/Merri/pen/kmflo

    One

    Two

    Three

    One

    Two

    Three

    Markdown parser tries to be too intelligent so I must have this comment here just so it doesn’t add these code blocks together.

    body {
    text-align: center;
    }

    .column {
    display: inline-block;
    text-align: left;
    vertical-align: top;
    width: 300px;
    }

    .column > div {
    outline: 1px solid red;
    padding: 10px;
    }

    .column > div:hover {
    height: 10em;
    }

    Of course you do need to have a parent element that has `text-align: center;` but if you use it as default in the body and let it cascade until you absolutely don’t need it anymore then you can keep playing around with centered columns as long as you like.

    You don’t need it now but you can also do stuff like this by taking advantage of the line flow: http://codepen.io/Merri/pen/ulycF Yay for 100% height sidebar hacks.

    jev
    # April 29, 2013 at 7:38 am

    Hi Guys,

    thanks for your answers. I need deep browser support (IE7 and up) for this one so Flexbox is not an option.

    @Merri: yeap, wrapped it with additional containers. The problem with this solution is element order in the markup. Meaning if user will tab through links it will go like this 1, 3, 5, 2, 4, 6, but i wanted it to go 1, 2, 3, 4, 5, 6.

    Fixed that with tabindex, not sure if this is best option though.

    But anyway thanks for replying.

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

You must be logged in to reply to this topic.

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