height attributes & streamlining css

HTML, CSS and anything else that deals with client side capabilities.

Moderator: General Moderators

Post Reply
laurenash
Forum Newbie
Posts: 2
Joined: Thu Mar 04, 2010 10:08 am

height attributes & streamlining css

Post by laurenash »

So this post can be broken down into two questions.

The first:
Is there a way to streamline my CSS code so that two elements can have exactly the same make up except for one? It seems like there must be a better way than having everything written out twice.

A simple example,

.shadow_left {
float: left;
height: 100%;
width: 10px;
background-color: #999999; }

.shadow_right {
float: right;
height: 100%;
width: 10px;
background-color: #999999; }

The second question:
I noticed that when I define a div to have a 100% height, in Firefox it limits the height to that of the browser and in IE, it extends it to match the content. Is there an easier way to define height so that it extends with content, while also having a minimum height?
mikosiko
Forum Regular
Posts: 757
Joined: Wed Jan 13, 2010 7:22 pm

Re: height attributes & streamlining css

Post by mikosiko »

laurenash wrote:So this post can be broken down into two questions.

The first:
Is there a way to streamline my CSS code so that two elements can have exactly the same make up except for one? It seems like there must be a better way than having everything written out twice.

A simple example,

.shadow_left {
float: left;
height: 100%;
width: 10px;
background-color: #999999; }

.shadow_right {
float: right;
height: 100%;
width: 10px;
background-color: #999999; }

The second question:
I noticed that when I define a div to have a 100% height, in Firefox it limits the height to that of the browser and in IE, it extends it to match the content. Is there an easier way to define height so that it extends with content, while also having a minimum height?
Question 1:
if my memory don't fail.... you can write it in this way
.shadow_left, .shadow_right {
height: 100%;
width: 10px;
background-color: #999999; }

.shadow_left {
float: left;
}

.shadow_right {
float: right;
}
User avatar
social_experiment
DevNet Master
Posts: 2793
Joined: Sun Feb 15, 2009 11:08 am
Location: .za

Re: height attributes & streamlining css

Post by social_experiment »

The second question:
I noticed that when I define a div to have a 100% height, in Firefox it limits the height to that of the browser and in IE, it
extends it to match the content. Is there an easier way to define height so that it extends with content, while also having a minimum height?
Are you talking about heights in terms of floated elements, because with a normal (non-floated) div element in both FF and IE, the height (if set to 100%) expands the same in both cases. In fact, without the height property set, it still expands. Im not sure why a percentage value (ie 30%) doesn't affect height but a pixel value does. You could also set height to auto (height: auto;).

Minimum heights are tricky, not from a code point of view but from a design point of view. Imho, if you want it a height, set it at a fixed height or don't set one at all.
“Don’t worry if it doesn’t work right. If everything did, you’d be out of a job.” - Mosher’s Law of Software Engineering
laurenash
Forum Newbie
Posts: 2
Joined: Thu Mar 04, 2010 10:08 am

Re: height attributes & streamlining css

Post by laurenash »

Thanks for the help (:
Post Reply