CSS question

[TodVader]

I just started learning CSS with a book I bought. I made this page: www.freewebs.com/csstesting/index2.html . I made this URL for testing purposes because this is just a template I'm testing.

The sidebar with buttons will be there on all pages.

The sidebar where it says multiple times "test" is a page specific sidebar. It's a different DIV called "pagenav".

The sidebar where it says adsense will have ads specific to the page (banner, adsense, etc).

The header is still not done and I will add other graphics in there to make it look more filled up.

I will add a styled top navbar similar to the footer but with graphic buttons at the top of the page under the header. (this will make the transition from header to content more "round" and less "square" like it is now.

Here comes my question:
I want the left and right sidebars to continue to have their background color down to the footer.

Like it is now, which ever one is the longest will go down and the other one will cut like you see on the test website.

If the content is longer than the 2 sidebars, both will cut before the footer.

is there anything I can do about this?

Also, any comments on the style? I did all this in about 3-4 hours so I can/will change some stuff for sure.

Thanks and sorry for my poor english, it's the best I can do .

 

[macgruder]

I

Here comes my question:
I want the left and right sidebars to continue to have their background color down to the footer.

Wrap your 3 columns in a div called #content or something. Give #content a background image.

 

[big_malk]

Make one div which contains everything, and has your background, arrange your other divs accordingly inside it. It will extend to the longest content inside it, and the background will continue right across all the content.
You may need to put something like "<p style='clear: both'> </p>" at the end just inside the big div to fix the layout for IE if I remember correctly, maybe not.

Set your centre div to have a white background and it will cover up the grey background.

Edit: What he said, was a bit slow with this post lol

 

[TodVader]

For this , use this address: http:www.freewebs.com/csstesting/index2.html

Thanks to both of you for answering my question. After doing it though, I have a small problem. First, here's what I did:

Insert <div id="page"> right before my left navigation div and closed it right after the right nav div. I set the middle background white and put a minimum of 1000px(I will probably lower that) height or else some grey would appear if there is less content than the sidebars.

In my style-sheet, I did this:

div#page
{
background-color: #A2A2A2;
}

I tried other stuff in there too but couldn't fine the solution to my problem.

There is space in between my header and my sidebars/content area. I cannot seem to get it to disappear.

Thanks for any help or tips!

p.s. nevermind the nonmatching colors in the header, I will fix this soon.

 

[macgruder]

I set the middle background white and put a minimum of 1000px(I will probably lower that) height or else some grey would appear if there is less content than the sidebars.
.

This should not be a problem if you do correctly. You need a background image to #page. I can't see the gap on the page you have right now.

 

[TodVader]

Could you please post a screenshot of what you see at the top? I just put a 1px white image as a background and removed the 1000px min-height and it did the grey in the content area.

EDIT: Use this address sorry: www.freewebs.com/csstesting/index2.html

 

[angelwatt]

This page has some good examples that might get you where you're going.

 

[big_malk]

Try putting you header div inside the page div, and try explicitly setting margins to 0px.

 

[macgruder]

*{
margin: 0;
border: 0;
padding: 0;
}

might help.

As will buying CSS Edit which will pay for itself in time saved in a day.