1 reply [Last post]
Packwood, Iowa
Last seen: 3 years 11 weeks ago
Packwood, Iowa
Timezone: GMT-5
Joined: 2012-02-01
Posts: 3
Points: 6


It looks like I got a bit cocky and sold a design to one of my clients that I am having trouble building.

Please take a look at the attached file so you can see what I am talking about.

1. The web page’s height dynamically needs to expand vertically.

2. The swirly design in the background has to stay at the bottom with the footer when the web page expands.

3. The yellow area represents the place where I need to put content that will also expand vertically. It needs to stay behind the circle herb images and in front of the swirly design.

4. The circle herb images can never move in position nor can the navigation.

Please go to the following URL and you can see what I have designed so far.


Take a look at demo.css

html {
	background: #5e88a2 url(../img/dice_slice.jpg) repeat-x;
body {
	padding: 0;
	margin: 0;
	background: url(../img/bg.jpg) no-repeat center top;
	width: 100%;
	display: table;
.header	{
	width: 960px;
	background: url(../img/header.jpg) no-repeat center top;
	height: 196px;
.footer	{
	float: left;
	width: 960px;
	background-color: #b9b299;
	height: 86px;
.container_12 {
	height: 100%;
	background: url(../img/design.jpg) no-repeat center bottom;

I could make .container_12 solid white but it covers the circle herb images.

page_1.jpg78.9 KB
ndirashful's picture
New Jersey
Last seen: 3 years 30 weeks ago
New Jersey
Timezone: GMT-5
Joined: 2012-02-17
Posts: 3
Points: 3

Did you get help with

Did you get help with this?
If not, take a look at what I came up with here:


Rather than floats, it's easier to use absolute positioning for those 2 floating images. Also, the container holding them should be positioned relative.

Hope that helps.