Hey there,

Here is what I am trying to achieve:


As you can see, it is made of three sections.

I think it would be created like this:

<div class="part1">
    <div class="top">
    <div class="middle">
           <!--- Put text here ---!>
    <div class="bottom">

However, I can't get the CSS right.

The top is just a repeated image along the X axis.
The middle is just a shade of grey: red 70, blue 70, green 70, hue 160, sat 0, lum 66.
The bottom is just another shade of grey: red 55, blue 55, green 55, hue 160, sat 0, lum 52

there is a border around the whole thing and between the sections which is grey: red 90, blue 90, green 90, hue 160, sat 0, lum 85

I tried getting it right, but I just cannot do it.

Can someone give me a hand please.

You can achieve that by using a table with three rows. Set the top and bottom rows height to 10% and make the middle row 80%. However, this doesn't use divs and it looks like you want to. Sorry if this post is totally useless to you.

Thank you for the reply, however, I do not wish to use tables as a way of achieving structure or design. I wish to reserve the use of tables for their purpose as a table, nothing more.

Hi Lib Auth

There you go:

Your CSS:

<style type="text/css"> 
border:#cccccc 3px solid;
border-bottom:#cccccc 2px solid;
border-top:#cccccc 2px solid;

And the HTML:

<div class="container">
  <div class="top"></div>
    <div class="middle"></div>
  <div class="bottom"></div>

Sorry, i don't bother to set the right colors...Good Luck :)

A few tutorial, which you might find useful

Thanks for your help :D

I am looking at the site now