0

I'm trying to achieve the following design:

https://www.dropbox.com/s/2y4qfxhn6noupap/Screen%20shot%202012-05-17%20at%203.18.00%20PM.png

The left and right columns would have a percentage width but ideally a fixed minimum width. The header and footer are fixed to the top and bottom of the window respectively.

There is also a background image on each column that is scaled to fit either the height or width (whichever is greater).

Currently I'm using Javascript to achieve my design widths, and some heights: but my question is:

Is this possible in entirely CSS? I'm happy if it uses HTMl5/CSS3 techniques.

Thanks for any assistance possible!

Thomas

Thomas Huxley
  • 85
  • 6
  • The only part that might not be possible is the inner images to fit the size.. you can use `min-width` and `min-height` on the images to make them fill the container, but if the container is smaller that the image it will not scale-down.. – Gabriele Petrioli May 17 '12 at 21:30
  • Yes it is possible using CSS and Media Queries. – khollenbeck May 17 '12 at 22:06

1 Answers1

1

Off the top of my head, something like this should work (not tested) in HTML4/CSS2:

20% column with min size 200px

.col {
    width: 20%; 
    min-width: 200px;
    width:expression(document.body.clientWidth < 200? "200": "20%"); /* for IE6 only, as it doesn't support min-width */
}

fixed position header & footer:

.header { position: absolute; top: 0px; left: 0px; width: 100%; height: 40px; background: #000000;}
.footer { position: absolute; bottom: 0px; left: 0px; width: 100%; height: 40px; background: #000000;}

See this question for the scaling background image: Stretch and scale CSS background

Community
  • 1
  • 1
FluffyKitten
  • 13,824
  • 10
  • 39
  • 52
  • Thanks, but would rather not use CSS Expressions. I'll keep having a play around with it and let you know how I get on! – Thomas Huxley May 20 '12 at 21:06
  • @ThomasHuxley You only need the expression for IE6 because it doesn't support "min-width". You can leave out the expression if you don't need to support IE6 (and Microsoft has stopped supporting it so unless you know fur sure your visitors use it, you're probably safe enough) – FluffyKitten May 21 '12 at 00:30