CSS Layout Problem

[Nathaniel10]

I am organizing my site to make it easier and faster to maintain. I keep a small version of my site on my laptop running Apache/PHP. I successfully organized and recoded things to the way I wanted. Upon uploading the file to my live site, I ran into several problems. One involves my layout.css file and how the formatting is being rendered in the HTML.

My pages have 3 column divisions: a center one for content, and left and right ones for ads. In my Apache laptop, the columns are rendered fine. But in the live site, the center column shifts to the left at the bottom of the ad. Playing with the height of the column helps for some pages. What I really need is a way make the left and right columns the same height as the center column. The 'auto' feature doesn't achieve that, as in

height: auto

.

Say the CSS code is as follows:

div.left {height: 250px}
div.right {height: 250px}
div.center {height: 750px}

Is there a way to extend the height of the left and right columns so they are automatically the same height as the center column? The height of the center column is determined by the amount of content.

Thanks in advance.

[Nathaniel10]

I should have searched before posting. The "inherit" property seems to be the answer to my problem. I haven't found any good examples of how to use it. How can I use the "inherit" property to make the left and right columns have the same height as the center column?

[clerisy]

best CSS tutorials Sites:
www.w3schools.com/css/
sixrevisions.com/css/20_websites_learn_master_css/
www.htmldog.com/guides/cssbeginner/
www.1stwebdesigner.com/css/must-read-css3-tips-tricks-tutorial-sites/

:)

[Nathaniel10]

Thanks for your reply, Clerisy.

I checked out those tutorials. None addressed my specific problem but I got some ideas. I think there are two possible solutions.

1.

div.container {height: whatever}
div.center {height: inherit} 
div.left {height: inherit} 
div.right {height: inherit}

2.

div.container {position: relative}
div.center {position: absolute} 
div.left {position: absolute} 
div.right {position: absolute}

I can't test either one right now because my employer blocks up/downloading of files. I will test both tonight.

What are the strengths and weaknesses of each of the possible solutions?

[Nathaniel10]

Well, neither of the 2 alternatives I listed in my prior posts worked. I'm stuck. :(

[Philippe.Lahaie]

if you want your 2 ad columns to extend perhaps i would try setting their height to "100%" but honestly from my small experience with css i doubt the height itself is your main problem,(and i doubt inherit would be of use here) perhaps there is something wrong with your div structure and their respective float or display settings , id set them all to something like :

float:left;
display:inline;

and then play with their width so they dont take up too much space for the containing div and get kicked bellow like they are now.

Your problem is more than likely that say your container as a width of 960px (its what i personnaly like to set mine at, just a preference) , then you probly have float left on both the left ads and the center div, and float right on your right ads div, but lets say each ad column is 150px wide, it would leave you with (in my case) 660px for the center div and yours is probly just a little wider thus getting kicked bellow the left ads because of how float works.

[Nathaniel10]

Philippe, you were partly correct. The height of the ad columns was not the problem.

I researched the float property of CSS and discovered that it wasn't the problem either. The problem was margins.

I was able to achieved the layout I wanted by setting the left and right margins of the center column equal to the width of my left and right ad columns. The example demonstrating that solution was on a site called "communitymx (dot) com".

I am marking this thread solved.