CSS Layout advice

[englishpremier]

I need to layout a page that had previously been created using tables. i will be using only CSS.

Here is a copy of the layout:




I was wondering what is the best way to achieve this in CSS?

The total width of the page is 750px (not including the two images left and right) using a page container.

a) How do i position the two left and right images that are really outside of the main design?
b) What about the white (which will be green) space around the content area and content boxes?

Thanks

[Steve]

Well, you could put appropriate margins around the content area and boxes. Or you could contain them within an element that's padded. As for the images, absolute positioning might work, not sure.

[englishpremier]

Well, you could put appropriate margins around the content area and boxes. Or you could contain them within an element that's padded. As for the images, absolute positioning might work, not sure.

I thought about that - having one large area and dividing that into the 'content' and the seperate 'content boxes' but i thought it looked a little messy.

The images outside of the page container concern me more though, I can position them with floats and margins, but that might/will cause problems with the rest of the design.

[ali73]

Hi englishpremier,

Here's what I would do.

An outer wrapper called 'outerWrapper', with three columns called 'leftCol', 'centerCol', 'RightCol'

'leftCol', contains the left image
'rightCol', contains the right image
'centerCol' is a wrapper for remaining items

'centerCol' contains 'Header', 'Navigation', 'contentWrapper', 'Footer'

'contentWrapper' contains 'Content' and 'boxWarapper'

'boxWrapper' contains the box types

hope that all makes sense, essentially , work your way in from the outside.

I could knock up a simple page with css to show you if you like. I'm more a programmer than a CSS developer, but I have had had to convert some table-based designs to CSS.

[cougarslam]

strange positioning for the 2 images?

have you got a link to the original tables based site?

[englishpremier]

I did using the following bits of code:

#page-container {
	width: 750px;
	position: absolute;
	left: 50%;
	margin-left: -375px;
	margin-top: 0px;
	background-color:#007e3e; 
}


.dogleft {
	position: absolute;
	bottom: 100px; 
	left: -150px;  
	border: 0px;
}


.dogright {
	position: absolute;
	bottom: 275px; 
	right: -150px;  
	border: 0px;
}

Thanks for the offers of help though.