3 divs inside of a centered div using percentage?

There may be easier answers, but here is one way of doing it.

Up vote 3 down vote favorite 1 share g+ share fb share tw.

Good morning, I am attempting to create a centered 3 column layout (h1, h2, h3) inside of a centered container div which has a width of 90%. H1 and h3 are a fixed width because of the width of my background image and h2 should be 100% of the remainder of the space. I'm able to make this work using specified widths but I would like to avoid that in case a user would like to view the page 3col test 1 2 3 html css div center no-javascript link|improve this question asked Aug 4 '11 at 15:00messedupfir225 57% accept rate.

– Maysam Aug 4 '11 at 15:24 width:auto did not work, but thanks for the suggestion. – messedupfir Aug 4 '11 at 15:34 another suggestion, set float:left; for h1 and h2 and float:right; for h3 hah? – Maysam Aug 4 '11 at 15:37.

There may be easier answers, but here is one way of doing it: Working solution: jsfiddle.net/W8Bwe/1/ Basically, embed h1 and h3 inside h2, floated left and right respectively. Then just set the margins on h2, to account for space taken up by h1 and h3.

This almost works. My center image (navspacer) is bleeding into the left and right columns. Trying to fix that now.

Thanks for your suggestion. – messedupfir Aug 4 '11 at 15:35 added margin-left: -27px for h1 and the opposite for h3 and this appears to work... thanks! – messedupfir Aug 4 '11 at 15:38 ah cool - I didn't test it with a background image - never figured out how to easily get images onto jsfiddle.

Glad you're sorted though. – BonyT Aug 4 '11 at 16:51.