PDA

View Full Version : bottom of content div



yebaws
Mar 22nd, 2009, 01:22 PM
I'm writing a site using css and no tables. I have two columns in the centre of the page with a white background and either side is a coloured background:

agra.org.uk/new/

stylesheet at agra.org.uk/new/stylesheets/agra.css

(links broken because I don't want these crawled)

I got over the problem of the divs not expanding to the bottom of the page by using a central "faux" column - I made a background image with a central white column and put the divs on top of that. Works fine. But I also want to have a coloured strip across the bottom of the page to match the one at the top. Here is where I am having problems. I want a coloured div that will appear at the bottom of the page content and span both the LH and RH column. LH column is always shorter than RH column and all other divs are relative.

Whatever I try I cannot get the effect I want. Closest I have come is by putting a static div at the bottom of the page, which isn't really what I want as it gives the impression that you are looking at the bottom of the page when there is still more content below.

Any ideas appreciated.....

effpeetee
Mar 22nd, 2009, 01:39 PM
You do have an error here. (http://jigsaw.w3.org/css-validator/validator?uri=www.agra.org.uk%2Fnew%2F&profile=css21&usermedium=all&warning=1&lang=en)

Probably nothing to do with your problem.

Frank

Excavator
Mar 22nd, 2009, 07:57 PM
Hello yebaws,
A couple problems there.
First, if you put a background color on #maincontentwrap you can see that setting a height there isn't working for you. Try this -

#maincontentwrap {
position:relative;
width:700px;
height:115px;
z-index:2;
float: left;
padding-top: 10px;
background: #f00;
}
Now remove the height:115px; line and see what happens.

---
If you put the background color on #wrapper, you can see you don't really have a 100% height layout. You already knew that though. The only way to get a bar at the bottom to match the top is either to give #wrapper a height or adapt this layout to your site (http://nopeople.com/CSS/full-height-layout/index.html).

I would recomend taking that site I link, copying the CSS/Markup and emptying it out, sizing it to fit your site width and then copy/paste elements from your site into the new layout.
If you copy/paste one thing at a time and test it to make sure it's working then the swap usually goes pretty well.

yebaws
Mar 23rd, 2009, 01:38 AM
Thank you so much. I will take that template code and lock it up somewhere very safe to save me endless headaches the next time I try to do this. I was at the point of going back to tables, but you have saved me!

yebaws
Mar 23rd, 2009, 11:10 AM
Hello yebaws,
A couple problems there.
First, if you put a background color on #maincontentwrap you can see that setting a height there isn't working for you. Try this -

#maincontentwrap {
position:relative;
width:700px;
height:115px;
z-index:2;
float: left;
padding-top: 10px;
background: #f00;
}
Now remove the height:115px; line and see what happens.

---
If you put the background color on #wrapper, you can see you don't really have a 100% height layout. You already knew that though. The only way to get a bar at the bottom to match the top is either to give #wrapper a height or adapt this layout to your site (http://nopeople.com/CSS/full-height-layout/index.html).

I would recomend taking that site I link, copying the CSS/Markup and emptying it out, sizing it to fit your site width and then copy/paste elements from your site into the new layout.
If you copy/paste one thing at a time and test it to make sure it's working then the swap usually goes pretty well.

Excavator,

Could you explain, please, what the #push bit does in the template you linked to:

#footer, #push {
width: 900px;
height: 50px;
margin: 0 auto;
background: #840000;
}
#push {
clear: both;
background:none;
}

Excavator
Mar 23rd, 2009, 06:37 PM
Excavator,

Could you explain, please, what the #push bit does in the template you linked to:
;
}

When empty of content, #footer is negative margined back up into the 100% height container.
When full of content, #push keeps #footer from overlapping your content.