Hi. Can someone help me with a CSS quandary?
Basically, I've created an opening page for my new bulletin board <!-- w --><a class="postlink" href="http://www.everydayoutrage.com">www.everydayoutrage.com</a><!-- w --> , but I am nervous about a few of the CSS elements. Specifically, I don't know how to make the two colored columns on either side of the main text stretch so that they are always in contact with the footer. For now, I've set their lengths in ems so that they will stretch a little when the text is resized, but this seems to me a rather crude solution. First of all, it leaves all that empty space beneath the form on the right side, and it renders a length that's probably not consistent across all browsers.
Can anyone suggest a solution? All I want is three columns (the outside ones with colored backgrounds) that stretch down and touch the footer and can stretch when the text is changed or increased in size. I tried wrapping all of the columns in a <div> with a background image, but I still had to put in a height to make the image visible (which kind of defeats the purpose). I suppose I could put a background image in the body tag, but then I would have to do away with the top and bottom margins and restyle my header and footer. Any other thoughts?
The CSS is located at:
<!-- w --><a class="postlink" href="http://www.everydayoutrage.com/outrage.css/">www.everydayoutrage.com/outrage.css/</a><!-- w -->
Thanks so much!
NewtDo a search for "faux columns" here and on the web (such as at <!-- w --><a class="postlink" href="http://www.alistapart.com">www.alistapart.com</a><!-- w -->) and you'll have one solution.Another way to go is to use left and right borders to create columns on either side of a DIV. What you do is set left and right border widths to whatever width you want, and then position content DIVs over those borders with transparent backgrounds so that it appears as if they are a "column". That's the method I used for this template:
<!-- m --><a class="postlink" href="http://www.togaenwebdesign.com/testsites/smartcode/">http://www.togaenwebdesign.com/testsites/smartcode/</a><!-- m -->
Then you always have three columns of exactly equal height.
Basically, I've created an opening page for my new bulletin board <!-- w --><a class="postlink" href="http://www.everydayoutrage.com">www.everydayoutrage.com</a><!-- w --> , but I am nervous about a few of the CSS elements. Specifically, I don't know how to make the two colored columns on either side of the main text stretch so that they are always in contact with the footer. For now, I've set their lengths in ems so that they will stretch a little when the text is resized, but this seems to me a rather crude solution. First of all, it leaves all that empty space beneath the form on the right side, and it renders a length that's probably not consistent across all browsers.
Can anyone suggest a solution? All I want is three columns (the outside ones with colored backgrounds) that stretch down and touch the footer and can stretch when the text is changed or increased in size. I tried wrapping all of the columns in a <div> with a background image, but I still had to put in a height to make the image visible (which kind of defeats the purpose). I suppose I could put a background image in the body tag, but then I would have to do away with the top and bottom margins and restyle my header and footer. Any other thoughts?
The CSS is located at:
<!-- w --><a class="postlink" href="http://www.everydayoutrage.com/outrage.css/">www.everydayoutrage.com/outrage.css/</a><!-- w -->
Thanks so much!
NewtDo a search for "faux columns" here and on the web (such as at <!-- w --><a class="postlink" href="http://www.alistapart.com">www.alistapart.com</a><!-- w -->) and you'll have one solution.Another way to go is to use left and right borders to create columns on either side of a DIV. What you do is set left and right border widths to whatever width you want, and then position content DIVs over those borders with transparent backgrounds so that it appears as if they are a "column". That's the method I used for this template:
<!-- m --><a class="postlink" href="http://www.togaenwebdesign.com/testsites/smartcode/">http://www.togaenwebdesign.com/testsites/smartcode/</a><!-- m -->
Then you always have three columns of exactly equal height.