css notes: fixed middle fluid outer column

• webmonkeying

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.

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:

<div id="header">
</div>

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.

<div id="header">
    <div id="header-left">
        <div></div>
    </div>
    <div id="header-mid">><img /> or <?php echo $content; ?></div>
    <div id="header-right"></div>
</div>

We make all three columns the same height:

#header-left, 
#header-mid, 
#header-right { 
    height: 321px; 
}

As mentioned earlier the two fluid outer columns are going to be absolutely positioned. They occupy half the screen each.

#header-left, 
#header-right { 
    position: absolute; 
    width: 50%; 
    top: 0; 
}

My right header continuation is a simple case of:

#header-right { 
    background: url("path/to/image") repeat-x 475px top;
    right: 0; 
}

475 is half of 950 and everything is calculated left to right top to bottom, so easy to offset as required. On the left we work with the inner div, which we give a relative positioning so it can be offset with a margin.

#header-left { 
    div { 
        position: relative; 
        background: url("path/to/image") repeat-x right top; 
        height: 100%; 
        margin-right: 475px; 
    } 
}

Now you can resize away and the bits that are supposed to line up (otherwise you can see it looks broken) stay lined up.

code

Here’s the lot:

html

<div id="header">
    <div id="header-left">
        <div></div>
    </div>
    <div id="header-mid"><img /> or <?php echo $content; ?></div>
    <div id="header-right"></div>

scss

#header { 
    position: relative; 
    text-align: center; 
    min-width: 1024px; 
    
    #header-left, 
    #header-mid, 
    #header-right { 
        height: 321px; 
    } 
    
    #header-left, 
    #header-right { 
        position: absolute; 
        width: 50%; 
        top: 0; 
    } 
    
    #header-left { 
        div { 
            position: relative; 
            background: url("path/to/image") repeat-x right top; 
            height: 100%; 
            margin-right: 475px; 
        } 
    } 
    
    #header-mid { 
        position: relative; 
        z-index: 10; 
    } 
    
    #header-right { 
        background: url("path-to-image") repeat-x 475px top; 
        right: 0; 
    } 
}

Now all I need is a site design that gives me an excuse to play with multiple background images…