css sidebars won't drop to page bottom without height specified

[fauntleroy]

Hi there,

I'm having a couple problems with a css page I'm building and would be grateful for any assistance with a fix.

First, I have two "sidebars" that flank the page. They are filled with a parchment background image. What's happening is the sidebars are dropping down to a specific spot because I have a height specified (57em), BUT, if I remove the height attribute (and I should be able to remove the specified height) the sidebars disappear all together .

The sidebar codes (generated by Dreamweaver) are ...

.thrColFixHdr #sidebar1 {
float: left; /* since this element is floated, a width must be given */
width: 33px; /* the background color will be displayed for the length of the content in the column, but no further */
padding: 0px; /* padding keeps the content of the div away from the edges */
background-image: url(images/ParchmentDarkBack.gif);
background-repeat: repeat-y;
height: 57em;
}


.thrColFixHdr #sidebar2 {
float: right; /* since this element is floated, a width must be given */
width: 33px; /* padding keeps the content of the div away from the edges */
background-attachment: scroll;
background-image: url(images/ParchmentDarkBack.gif);
background-repeat: repeat-y;
height: 57em;
}

Each page on the site will be a different height, so Ineed the columns to adapt accordingly
____________________

Also, I'm having an issue with odd white space at the bottom of the page. It's at the bottom of the container (I suspect), but it's only showing in Camino and Firefox (for Mac). I suspect it may have something to do with an Explorer 5 fix built into the code? I know Explorer 5 fixes make for odd white spaces on Spry menus.

Here's where the page resides

http://www.zavsays.com/EstatePlanningSmarts/index.html

And here are screenshots of Explorer Vista ... on a Mac Powerbook

http://www.zavsays.com/EstatePlanningSmarts/ExplorerScreenshot.jpg

And here is a Mac Camino screenshot

http://www.zavsays.com/EstatePlanningSmarts/CaminoScreenshot.jpg

I hope I presented these problems accurately and thanks for any help

 

[Vragabond]

Your first query is a known problem with designing websites that have columns with different colours that need to run alongside the main page. The problem is best fixed with faux columns.

Your second problem derives from the margins on the paragraphs inside your container. This is called margin collapsing and is a well known feature of html/css. The link will provide solutions on how to solve it. Or you could simply zero out the bottom margin on the last paragraph or use an element that has no bottom margin as your last element inside that container.

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

 

[BigRed1212]

Look at this as well:

http://www.communitymx.com/content/article.cfm?cid=BAD95&print=true

Somebody here pointed that one out.

 

[fauntleroy]

Thank you for the suggestions. Complicated stuff though. For some reason, the Faux Columns wouldn't behave in my case. I'm ultimately going to do it by eliminating the sidebars all together and build the columns into the container (in the background).

The white space too won't go away, so I'm changing the background in Dreamweaver to black. Now there'll be a black bar at the bottom (in Camino and Firefox) It doesn't look bad.

Someday I'll revisit these issues .... but I'm fried for now.

Much Appreciated!