The past few weeks I’ve been working on www.carolinesylge.com basically adding new content and revamping the layout. I originally designed the site at a fixed hieght. It was supposed to fit in 8×6 and used iFrames to present the content. So things have moved on since then and Caroline now wants a site that presents the content in an easier, scrolling format.

At this point I’ve avoided spending time attempting to redesigning the whole site so I’ve adapted the existing design so that it flows down the page. However, I was looking at the new version of the site and realised that the content looks out place if the side naviagation is longer than the main content area. Here is is for you…

The site has a two column layout presenting two boxed areas of information overlaid on a tiled background image, with a 20 pixel space between the two.

If the navigation column has a lot of information and the main content box doesn’t you end up with a long box of links on the left and an empty space on the right.

The solution to balance the page would be to make sure the two column both run down to the same level.

How do you do this?

Answer: Slice a 1px high image the width of the two areas providing the background colour for the two columns, with a transparent backrgound between them to allow the tiled background to show through.

Set this image as a background to a div wrapping the two over divs while they have background set to none. This will ensure that no matter which is the longer both will extend to the same length.

This entry was posted on Saturday, May 5th, 2007 at 1:10 am and is filed under development. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.