Annoying layout issue.

[jev]

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.

[Paulie_D]

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?

[Merri]

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]

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.

[Author]

Posts