Questions regarding 2 column liquid layout

HTML & CSS
1

Hello,

So I’ve been trying to come up with a 2 column liquid layout including a header and footer. I know that with the 2 columns you have to float them to the left and give them percent values.

I’m getting confused when it comes to specifying the wrapper percentage and then the header and footer sizes. I’ve mocked up an image to give you an idea of what I’m trying to create below:

Basically, I want to make the wrapper approximately 760px in width but I don’t want this fixed, what can I do?

If I set the wrapper as a percentage, what width should I be making the banner or footer? If it is a percentage, how would I specify a banner image to fit in this?

Are there any good layout tutorials around for fluid layouts? This is one area I need practice in.

2

If you give the wrapper say a percentage width of 80% then the header and footer inside that wrapper woudn’t really need any dimenions as they would automatically stretch to 100% wide. (You could set 100% width on the header and footer just to cure “haslayout” issues in ie6 and 7 if needed.)

The two floated columns would then be sized as a percentage of the wrapper so you could have the left column at 30% and the right column at 69% leaving a 1% error for rounding bugs.

Basically, I want to make the wrapper approximately 760px in width but I don’t want this fixed, what can I do?

lol - you can’t have it fluid and still be 750px wide :slight_smile: Make your mind up - do you want it fluid or fixed.

You could make it elastic with min and max width (apart from ie6).

e.g.


#wrapper{
width:100%;
min-width:600px;
max-width:1040px;
margin:auto;
}

That would give you an elastic site that scales between 600px and 1040px (ie6 would just get 100% width).

If I set the wrapper as a percentage, what width should I be making the banner or footer? If it is a percentage, how would I specify a banner image to fit in this?

The header and footer will automatically be as wide as the parent wrapper as mentioned above.

How you handle the banner image is up to your design skills :).

Usually you would place the banner as a background image that is either over-sized to start with or just fades into the background at larger sizes. Because the image is in the background it won’t break the header and is just revealed as required.

In a fluid layout you need to be careful of large images breaking the layout as fluid layouts need to be carefully designed. Don’t use large images where possible because the columns will get too small to hold the image and will break the columns (or you will need to hide the overflow).

For a small side column I would usually for with a fixed width because they get too small too quickly than a fluid width.

Here’s an advanced example of a min and max width layout.

3

Thanks, I think I’ve sorted most of it out now. I’m still a bit confused with the banner, but I’m sure with enough work I’ll work it out. I’m thinking that if I create a larger banner - say the max-width size this should be fine?

Edit: Also when specifying min-width or max-width, does either take precedence depending on screen resolution?

Also, when specifying a body background, I was planning on using a drop shadow style either side of the wrapper, I’m tipping with a fluid layout, this may not be possible?

4

It will be ok if you place it as a background-image. If you place a large image in the html then the container can never shrink past the image size and it will either hold part of the layout very wide or will just stick out (depending on browser.)

Edit: Also when specifying min-width or max-width, does either take precedence depending on screen resolution?

It doesn’t have anything to do with screen resolution really.

e.g. if you say this:


#wrapper{
width:80%;
min-width:600px;
max-width:1200px;
}

The element in question (#wrapper) will either be 100% wide if the space available is greater than 600px and at the same time less that 1200px wide.

If the space available for #wrapper is less than 600px then the element will stay at the min-width of 600px.

If the space available is greater than 1200px then #wrapper will stick at 1200px irrespective of the greater width available.

Also, when specifying a body background, I was planning on using a drop shadow style either side of the wrapper, I’m tipping with a fluid layout, this may not be possible?

Placing a shadow background around a fluid layout is a little complicated and you could instaed just use the css3 box shadow for good browsers. Otherwise you need to use something like [URL=“http://www.alistapart.com/articles/onionskin/”]this.

5

For the banner you could just place an image in the HTML and set it to width: 100%. I know this doesn’t always render well, but it seems to be fine in modern browsers (especially with a little help for IE: -ms-interpolation-mode: bicubic; ).

<div id="banner">
  <img src="banner.jpg" alt="">
</div>


  #banner, #banner img {width: 100%;}

Do you have any objection to that Paul?

6

None other than the fact that some images don’t display very nicely like that but it is a solution. :slight_smile: (BTW CSS3 will allow us to do that with background-size.)

Of course if it’s just a header image and not important content then it should be in the background anyway. If it’s a company name or main heading then it should be in the html (or use some image replacement technique instead).

7

Thanks for your reply. I had a feeling you’d been not too keen on this in the past, so thought I’d ask. I find jpgs pretty reliable.

BTW CSS3 will allow us to do that

Yes, that’s something to look forward to. ALA has a nice article about that.