How can I make this simple layout with CSS?

HTML & CSS
1

My site is showing its age with tables and I would like to update and replicate its design using CSS.

I thought it would be pretty easy to achieve and I’ve tried many times to replicate it in Dreamweaver, but it’s just becoming really difficult and frustrating as I can’t seem to do it. I’d have thought that creating a site like this in CSS would be straightforward, but I just can’t seem to manage it.

I’d really appreciate your help as it’s holding me back from redeveloping my site for 2010. I’ve linked to a Screenshot of the desired layout that I’m trying to achieve.

Desired CSS Layout
http://img192.imageshack.us/img192/1087/desiredlayout.gif

Thanks for your time. :sick:

2

Hi, we’ll be happy to help, but I think we also need to know the dynamics of the layout.

Which boxes are flexible/fluid in width/height, and should they stay equal in column height? They can’t all be fix lengths, I guess. :slight_smile:

3

Paul has many 2 column layouts at his site
http://www.pmob.co.uk

To get the second box in teh right column, just create one (although you can find the dynamics of the layout in there, whatever they are :))

4

Hi,
From looking at your screenshot it caused me to remember something similar I had done a while back.

I guess I could describe it as an “equal height two column layout with stacked sidebar”.

http://www.css-lab.com/demos/2col/stacked-sidebar.html

From what I see, if you were to swap the stacked sidebar boxes with the main content it would be similar to what you are after. It would just need some headings on each of the boxes and that could be as easy styling some “h” tags.

5

Rayzur, that’s pretty close to what I’m trying to achieve, but how would I go about getting each box to have a shaded cell bar at the top which will contain the title description of each content box? I’m a complete novice with CSS layouts and Dreamweaver.

Thanks for your help everyone, I really appreciate it!

6

how would I go about getting each box to have a shaded cell bar at the top which will contain the title description of each content box?
Hi,
As I had mentioned above you could set some “h” tags for the headings, then you could just set a shaded BG image on those headings.

If you read through the notes on that demo you will notice where I explained that it could be done much easier by using a repeating faux image if it is a fixed width site.

Will it be a fixed width?

7

Assuming that it will be a fixed width layout it can be done much easier using this repeat-y faux image.

Demo Faux Image

Then I set up the stacked divs on the right side in your main content area and came up with this example.

http://www.css-lab.com/demos/2col/stacked-divs-faux.html

I just used an old gradient image I had as a BG for the headings.