Fixed-width center column, non-fixed sides.

[Jagiero]

Hello. Hi. Its late. I’m tired. Please help.

Ok, so this is a really simple problem i’m having. Or atleast, it should be simple, but my brain is fried and i can’t get it to work the way i want it.

Basically i want 3 columns. The center column needs a fixed width of 900px, but the two side columns need to expand their sizes based on the size of the users screen, and be equal with eachother. Each side column is having a separate background image (left column bg image aligned to the right, right column bg image aligned to the left).

Like this: image

I don’t want to retrieve the user’s screen size myself if i don’t have to. I also don’t want to use tables.

I swear i’m not an idiot. I’m just tired, and a google search did not give me the right answer. I can’t believe its not possible to do purely in css, it must be. I just can’t think of the solution.

Plaaeesee.. Haalp.

[Paulie_D]

Easy with flexbox.

http://codepen.io/Paulie-D/pen/wKBvwg

Of course, you’ll need to see it full screen.

[Paulie_D]

…or floats and calc

http://codepen.io/Paulie-D/pen/epmYYj

[bearhead]

You can also use display:table-cell; if you need deeper browser support:

http://codepen.io/kvana/pen/zvxYEX

I would probably recommend one of Paulie_D’s solutions if you don’t need to worry about ie8 or 9 though…

[Jagiero]

Excellent replies! Thanks everyone!

[Author]

Posts