Forums

CSS

This topic is locked

expand column to 100% height, but with padding

Posted 29 Mar 2008 01:38:42
1
has voted
29 Mar 2008 01:38:42 Rebecca Richter posted:
Hi! I'd like to expand my columns to 100% height, but have about 10px padding on the bottom no matter how high the column is expanded.

Please see www.blackfootchallenge.org/am/publish/newsite/index.php and look at the "Support" center column. This is the css where I added the rules to expand the column to the bottom:

.col1 {
width: 34%;
left: 108%;
margin: 0 0 -2000px 0;
padding: .5em 0 2000px 0;
background-position: center top;
background-repeat: repeat-x;
border: 1px solid #963;
background-image: url(../images/backgrounds/support_bg.jpg);
}

The right-hand column shows how I'd like it to look--with the padding on the bottom.

Thanks,
Becca

Replies

Replied 29 Mar 2008 12:52:41
29 Mar 2008 12:52:41 Alan C replied:
Hi
that's a nice looking site <img src=../images/dmxzone/forum/icon_smile.gif border=0 align=middle>

I took a look at your css with cssedit (if you are developing on a mac it's simply magic ) and can see what I think are some style names that might be confusing -

you have a style called .col1, (sic) a comma at the end, then in other places you have styles listed like .threecol h2 a:active { with spaces in the names, and

<pre id=code><font face=courier size=2 id=code>
.col1,
.col2,
.col3 {
float:left;
position:relative;
padding:0 0 1em 0;
overflow:hidden;
}
</font id=code></pre id=code>

I'm not expert enough to know how they will be interpreted but I have had issues with names of styles in the past, so now I always stick to whole words like

.threeCols

I think things may be getting confused because if you have a name that includes a comma then a list of styles such as you have (shown above) may not work how you expect.

I hope that helps

Another way to attack it, if you don't have it already, is to get the developers' toolbar for firefox, that allows you to edit css dynamically and watch the effect, then save the resulting css

good luck

Replied 31 Mar 2008 00:55:59
31 Mar 2008 00:55:59 Rebecca Richter replied:
Mmmm...yes. The css names are a little confusing. I adapted the column code from matthewjamestaylor.com/blog/ultimate-3-column-blog-style-pixels.htm, and I'm not sure I like it. I will change some of the names around and see if that helps, but I think that may not take care of the 100% height with padding that I desire.

I do have the FF developer toolbar, but have never altered the CSS dynamically. Great idea!

- Becca
Replied 31 Mar 2008 10:55:12
31 Mar 2008 10:55:12 Alan C replied:
hi again,

try changing something small in the css first, like padding or margins so you can watch what happens, then if you like the results you can save the file (on your local machine, then upload), otherwise refresh your page in FF and all the changes you made are gone.

Reply to this topic