I have this site http://www.ctprep.org and the layout has two columns in a wrapper div. I would like the divs inside the wrapper to always be as tall as the wrapper div. I am having trouble accomplishing this if anyone could look at the site and give me some advise I would appreciate it. Thanks
which two columns are in the same wrapper? I'm guessing you'd like the center and right columns (with the rounded corners) to be the same length? They're currently not in the same wrapper...
I think I'd tackle this differently. In the past, I would have created three graphics - one showing the top rounded corners of both columns, a second showing the white on red background with the borders of each column, and the third finishing the rounded corners, again on both columns. The second image would be placed on the wrapper and the first and third on other elements 'covering' the wrapper bg to give the impression of the rounded columns.
Now, however, I'd use css3 with border-radius and box-shadow and be done with it - early IE be damned (they'd get square columns with no shadow and I wouldn't give a sh!t)
As, so many people still us IE I opted for your 3 image suggestion. I implemented on the index page for now using a separate style sheet. The columns are equal height now, but still don't fill the height of the wrapper. What am I missing?
I'm not sure if you're asking why there's space below the two right columns or how to get the two right columns the same length as the left column (if they're shorter).
For the former, you have a bunch of empty p's in the nav column. For the latter, the images will need to be placed on a wrapper of all three columns - not just the two right ones.
I am sorry, I wasn't specific, I guess I would like the footer to be at the bottom of the page with the columns stretching to the footer, even if there isn't enough content to force the wrapper open.
I would use the shell for the main background image, the header (padded on bottom) for the top of the rounded corners, and the footer (padded on top) for the bottom of the rounded corners - thus eliminating the extraneous divs and giving full height columns regardless of which column is longest.
I set it up similar to what you suggested accept I couldn't get it to work with the rounded corner as the background for the footer. Now though it is pushing the footer up in IE8 to make room for the floated "copyright". Why does it not push the shell div open in all the other browsers?
I set it up similar to what you suggested accept I couldn't get it to work with the rounded corner as the background for the footer Why not? just add it to the footer background with no-repeat top left and add 21px (height of image) to the top padding. You'll need to eliminate the top border as well, but you could add that to the image. You could also eliminate the extraneous div holding the top rounded corners and the image to the bottom of the header image.
Now though it is pushing the footer up in IE8 to make room for the floated "copyright". Why does it not push the shell div open in all the other browsers? You must be in compatibility mode, as I'm not seeing it in IE8 (which should behave), but IE7 (and no doubt 6) are expanding the shell to contain the float - an erroneous behavior. The simple fix here is to place the copyright div outside of the shell.
I think I'd tackle this differently. In the past, I would have created three graphics - one showing the top rounded corners of both columns, a second showing the white on red background with the borders of each column, and the third finishing the rounded corners, again on both columns. The second image would be placed on the wrapper and the first and third on other elements 'covering' the wrapper bg to give the impression of the rounded columns.
Now, however, I'd use css3 with border-radius and box-shadow and be done with it - early IE be damned (they'd get square columns with no shadow and I wouldn't give a sh!t)
For the former, you have a bunch of empty p's in the nav column. For the latter, the images will need to be placed on a wrapper of all three columns - not just the two right ones.
Here's a pic depicting the three images:
http://i156.photobucket.com/albums/t30/wolfcry911/crossimage.png
Why not? just add it to the footer background with no-repeat top left and add 21px (height of image) to the top padding. You'll need to eliminate the top border as well, but you could add that to the image. You could also eliminate the extraneous div holding the top rounded corners and the image to the bottom of the header image.
Now though it is pushing the footer up in IE8 to make room for the floated "copyright". Why does it not push the shell div open in all the other browsers?
You must be in compatibility mode, as I'm not seeing it in IE8 (which should behave), but IE7 (and no doubt 6) are expanding the shell to contain the float - an erroneous behavior. The simple fix here is to place the copyright div outside of the shell.