Skip to main content

css notes: fixed middle fluid outer column

Posted on: Friday, 6 April 2012 @ 1:53pm
Blatting about
More specifically

Also known as: I'm a blithering idiot.

I spent way too long overthinking this problem and only finding solutions with floats (I have very specific cases where I'll use floats for layout, also I could have missed anything that didn't use floats for layout as I was stupidly staying up way too late when working on this). The way to do it is actually embarrassingly easy. I'll be using it for the header and footer (after I've installed Sassy, prepro and phpsass).

header showing divs for 3 col layout for a fixed width middle and fluid outer columns

The above image is a screenshot of the header image on my local as seen in Opera (because it was the only one that showed the outlines regardless of the z-index).  The middle columns are 950px wide (specifically set in the footer due to it being a background image, not set in the header as the image isn't backgrounded and the div sizes itself to it).

What I specifically needed was for the continuation images to start from the edges of the middle div (the left continuation image of the header and both footer continuations are uneven) and stretch to the edges of the container (which is the same width as the browser window, however wide that may be).

I'm taking a big long step by step approach, if you don't need the explanation or just want code jump to the bottom.

The html is pretty straightforward. You need a wrapper for the lot:

to keep it together on one line and also to contain the two outer columns which are absolutely positioned.

#header { position: relative; text-align: center; min-width: 1024px; }

Now the three columns. In my case I have the correctly sized image making the middle column as big as it needs to be. If you're using a background image or using it for the content section, you will need to set the width in the css. You will also need one empty div inside the left column. Normally I'd have it on one line, the empty inner div is quite easy to miss when written like that.

No comments yet

Add new comment

The content of this field is kept private and will not be shown publicly.