Development Complex CSS Layout

Hi,
I'm hoping to create the CSS layout illustrated at http://jazzle.co.uk/new.php
The boxes with red dotted outlines will have content, I want graphics where the green lines are, and the boxes far left and right must have different backgrounds.

I was hoping I could simply use a centred 2-column layout, but this alone doesn't allow for the differently coloured pieces left and right.
I also want to have a 'stickyFooter' (see http://www.themaninblue.com/experiment/footerStickAlt/)

So, is this possible?
TIA, j

 

should be possible. Are the graphics on the left and right a set width?

 

I knew there was something I hadn't said.
The whole thing should be liquid, with min and max widths on the central parts (i.e. 'c' and 's' in the diagram).

 

Alright, I figured that. What I'm wondering tho is when you say the box far left and right because that will make a difference in how the style is written.

 

Now as for your footer, did you see the code listed at the site your linking to? seems pretty straightforward to me.

Essentially, your div layouts could look something like this:

Code:

<div id="contents">
<div id="h"> header </div>
<div id="c"> content </div><div id="s"> side </div>
</div>
<div id="f">footer</div>

I'm trying to wrangle the css right now, I'll keep ya posted

 

i think you will be fine with the footer your problem is going to be in 'c' and 's' but nothing that cant be fixed (well to a point).

Code:

#footer {
	clear:both;
        line-height:30px;
	height:30px;
	background-color: #820807;
	border-left:20px solid #fff;
	border-right:20px solid #fff;
	border-bottom:20px solid #fff;
	color: #fff;
	text-align:center;
	position:relative;
}

that might help dose not do exactly what you want

 

lol damn jazzle you just had to make this difficult didn't you?

 

yeah, unfortunately!
it's a real toughie - don't think I didn't try for a while before asking you guys for help!

I guess it's a 5 column layout, so it's not going to be easy.
I hoped I'd be able to put a three-column layout in the middle of another, but I didn't manage - doesn't mean it's not possible though...

 

alright, when i get the chance i'll finish the layout in css i've just about got it working.

 

fantastic - much obliged.

 

well it works out for me because I like the layout technique. I'm using something very similar but using fixed widths. are you running your own webserver?

 

no, but have a good package from Highland3r. http://4-s.co.uk/

 

Since this essentially boils down to splitting the background, I hoped to tile an image but only from the middle outwards, but that doesn't seem possible.

 

any luck anyone?

 

last bump.
all ideas/suggestions are welcome.

 

I made a hideous version, but it functions.

jazzle's Overly Complicated CSS Layout

It uses really bad tables (badly coded - I haven't written any in years), but the XHTML 1.1 and CSS both validate. The footer is "sticky," and the background images are stuck to the viewport (a la "complexspiral" by Eric Meyer). This doesn't work in IE, but everything else does.

I could probably whip up a version that doesn't use tables and has nicer looking code, but this is the easiest way to do it.

This would be so easy if you didn't need those green lines. They mess the whole thing up.

 

Maybe I'm wrong, but I think jazzle wants a pure CSS layout, not using tables. Hence the reason this css is so damn complicated.

 

As I said before, the layout can be done very easily if the green bars weren't part of the design. However, as it is, tables are the easiest way to lay this one out, since it is very rigid and easily divided into blocks of padding.

 

I understand that, I'm just pointing out that he wants a CSS layout. I doubt he would need to ask for our help if he wanted to design it with tables.

 

Can you provide a link to the graphics that you want placing where the green lines are?

I might have a crack at coding this for you if I have some spare time today or tomorrow.

Sam