CODEWITHSUNDEEP
csspixel
thedp
thedp

Reputation: 8516

CSS width/height pixel and percentage calculation combintaion?

Is there a way to set the height/width CSS properties to something like that: 100% - 50px So if the total 100% is 1000px, then the end result would be 950px. And the 100% is set by the browser size.

UPDATE: What I'm trying to do is:

I have two div, the first div's height is 50px, I would like the second div's height to cover the remaining space.

Upvotes: 5

Views: 26076

Answers (5)

Sergio Morstabilini
Sergio Morstabilini

Reputation: 2055

In the second div set 

top=50px, 
bottom=0 
position=absolute

http://jsfiddle.net/4TG2Z/

No javascript needed.

Upvotes: 1

patricjansson
patricjansson

Reputation: 763

There is a solution in css3, and I also actually think it has been supported in IE for sometime.

Example: 

width: -moz-calc(25% - 1em);

See http://hacks.mozilla.org/2010/06/css3-calc/

Upvotes: 9

thedp
thedp

Reputation: 8516

After search though the net, I realized that it can't be done. The only way to simulate is to adjust it with JavaScript and onresize event.

Upvotes: 3

Guffa
Guffa

Reputation: 700910

If you want this for the whole page:

body { margin: 0; padding: 25px; }

That will give you a padding at the top and the bottom also. If you don't want that you can set them to zero:

body { margin: 0; padding: 0 25px; }

Note: Most browsers use a default margin for the body, but some (Opera) use a default padding instead, so you should always specify both the margin and padding for the body.

Upvotes: 1

Matijs
Matijs

Reputation: 2553

Not with width itself.

You have to set either the margins and / or the paddings left and right to a total of 50px.

Upvotes: 2

Related Questions