Div margin-bottom of a proportion of its own height?

Question

For example, I have a div that has a height of 100px (I don't know the height, but let's suppose I did). I want to set the margin-bottom to a percent, so 25% would be 25px assuming the previous height. However, the percent seems to be of the document, not the element:

<div style="height:100px;margin-bottom:100%"></div>

The margin should be 100px but it isn't, it is 100% of the height of the page.

The element is just a line of text that has no background, so using height:150% theoretically could also work.

@JCOC Actually, the percentage is based on the page width, not height... — Šime Vidas, Feb 05 '11 at 21:31
Could this help? http://stackoverflow.com/questions/485827/css-100-height-with-padding-margin — Jared Farrish, Feb 05 '11 at 22:00

score 51 · Answer 1 · answered Jun 19 '12 at 15:20

51

How about a CSS3 solution:

div {        
   -webkit-transform: translateY(-50%);
   -moz-transform: translateY(-50%);
}

answered Jun 19 '12 at 15:20

ShibbyUK

1,501
9
12

1

translateY as a percentage seems to refer to the height of the element itself, not the height of its parent. – Bugalugs Nash Feb 11 '14 at 07:01
7

This question is not about the parent. – ShibbyUK Jan 16 '15 at 12:28
2

Your'e a genious! this should be the correct answer – mamashare Feb 21 '17 at 13:09
9

this however does not affect surrounding elements like margin does. so it kind of acts like position relative. Can I use a transform that affects surrounding elements? – Björn Jul 25 '17 at 10:30
Great answer. Can't stand people using JS to solve all the layout problems CSS should be solving. – Vincent Chan Apr 01 '21 at 04:11
@mamashare nope, translate just moves the element, the occupied space is not being free tough. so, it is not a proper replacement for the margin property. – muzzletov Apr 05 '23 at 14:56

score 6 · Answer 2 · answered Feb 05 '11 at 21:28

6

http://www.w3.org/TR/CSS21/box.html#margin-properties

Percentages: refer to width of containing block

If your DIV is in the BODY element, then the containing block is the BODY element, so the percentage will be based on the BODY width - which is in most cases the same as the width of the viewport.

Demo: http://jsfiddle.net/jghsF/1/

(Try resizing the width of the browser window and you will see that the margin-bottom changes)

answered Feb 05 '11 at 21:28

Šime Vidas

182,163
62
281
385

Using wrappers (which would be the solution) isn't really an option for me. So, is there any other way to do this? – JCOC611 Feb 05 '11 at 21:31
@JCOC I cannot tell for sure, there might be a CSS3 solution. Also, JavaScript (obviously). – Šime Vidas Feb 05 '11 at 21:42

Jared Farrish · Accepted Answer · 2011-02-05T22:26:52.567

5

As others note, I don't know you can use CSS to do this. jQuery could help:

http://jsfiddle.net/userdude/PZAvm/

<div id="margin">Foo</div>

div#margin {
    background-color:red;
    height:100px;
}

$(document).ready(function(){
    alert($('#margin').height());
    var margin = $('#margin').height()/4;
    $('#margin').css('margin-bottom',margin);
    alert($('#margin').css('margin-bottom'));
});

EDIT - This could possibly be done using em's.

EDIT 2 - em's are keying off font size, not a calculated box model size. So it won't work.

EDIT 3 - JCOC611 was able to use the em approach after all.

Original: http://jsfiddle.net/userdude/xN9V7/3/

JCOC611's Demo: http://jsfiddle.net/BCTg2/

The code:

<div id="foo">
    Foo
</div>
lol

div#foo {
    background-color: #fcc;
    margin-bottom: 1.5em;
    font-size:20px
}

edited Feb 05 '11 at 22:26

answered Feb 05 '11 at 21:42

Jared Farrish

48,585
17
95
104

The problem is that the height is going to be changing a lot, so I was hoping for a CSS answer. (of course I could update the margin w/ javascript but that would just take too much code) – JCOC611 Feb 05 '11 at 21:47
1

Who said the height would be changing by text wrapping? – JCOC611 Feb 05 '11 at 21:49
I think that deriving the height for an element from a calculation that relies on width is not going to work (as Sime Vidas points out with his reference to the docs). If you could post an example of your usage with the html and your css, that might help device a solution with your specific needs in mind. Btw, I personally think it silly that margin-top and margin-bottom rely on the containing width. :\ – Jared Farrish Feb 05 '11 at 21:53
Oop, nevermind. em's are keying off the font size, not margin, so when I updated the height, it still gave the same margin height. – Jared Farrish Feb 05 '11 at 22:14
It was your idea to use EM's, so if you update your answer to fit the fiddle I just posted, I'll mark it as accepted. – JCOC611 Feb 05 '11 at 22:22
yes, because the margin will change depending on the font size – JCOC611 Feb 05 '11 at 22:23
Ok, I updated it. Interesting how things work out sometimes. :) – Jared Farrish Feb 05 '11 at 22:27
This, however, will only work for one-line texts. Fortunately, that's my scenario. For anyone else, beware! PS: Yes it's pretty interesting! Thanks a lot! – JCOC611 Feb 05 '11 at 22:34

score 1 · Answer 4 · answered Feb 05 '11 at 21:30

This question is a great deal more fascinating than I'd expected (+1).

I'm working with the following html structure:

<div id="someContent">
    <p>Lorem ipsum.</p>
</div>

Originally I tried to use padding to simulate a 'border' (JS Fiddle demo):

#someContent {
    background-color: #000;
    border-radius: 1em;
    padding: 10%;
}

p {
    background-color: #fff;
}

This on the assumption that the padding would be derived from the height of the element itself, which turned out to be a wrong-assumption.

After that clearly failed I tried to use a margin on the contained elements, on the assumption that if the margin of the containing element is based on its parents, so too should the margin of the contained element, giving the following CSS:

#someContent {
    background-color: #000;
    border-radius: 1em;
}

p {
    margin: 10%;
    background-color: #fff;
}

JS Fiddle demo. And this failed, too.

I suspect that it's impossible without defining a height for the parent element, which might require a JS solution.

Thanks! JS is however my last resort, but you might want to check out the edit on my question, it might inspire something else! — JCOC611, Feb 05 '11 at 21:44
No JS-solution, please! Think about people that have disabled JavaScript (there are some good reasons to disable it). — anroesti, Feb 05 '11 at 22:30

Div margin-bottom of a proportion of its own height?

4 Answers4

Linked