CSS Fluid Layout: Margin-Top Based on Percentage Grows When Container Width Increases

CSS fluid layout: margin-top based on percentage grows when container width increases

In CSS, all four margin: and padding: percentages are relative to the width ...even though that may seem nonsensical. That's just the way the CSS spec is, there's nothing you can do about it.

Can you do what you want with 'ex' (or 'em') instead? That's the way I'm used to seeing "fluid" values for margin/padding specified ...and it may be less problematic than percentages. (Although I don't have the relevant first-hand experience, I suspect the extremely long precisions on your calculated percentage values are going to set you up for browser incompatibility problems later. My style is to limit CSS percentages to integers if at all possible, or occasionally perhaps one or sometimes maybe even two digits after the decimal point.)

If you really want an exact arbitrarily-sized empty vertical space that's a percentage of the container, the first thing that comes to my mind is a separate empty < div > with a "height: nn%" CSS specification. Or perhaps something else you're specifying is already handling the vertical sizes they way you wish (since it would appear the margins aren't really doing anything at all on a vertical resize).

How to set the margin or padding as percentage of height of parent container?

The fix is that yes, vertical padding and margin are relative to width, but top and bottom aren't.

So just place a div inside another, and in the inner div, use something like top:50% (remember position matters if it still doesn't work)

How is padding-top as a percentage related to the parent's width?

From CSS fluid layout: margin-top based on percentage grows when container width increases :

In CSS, all four margin: and padding: percentages are relative to the width ...even though that may seem nonsensical. That's just the way the CSS spec is, there's nothing you can do about it.

Straight from the horse's mouth:

'padding-top', 'padding-right', 'padding-bottom', 'padding-left'
Value:      <padding-width> | inherit
Initial:    0
Applies to:     all elements except table-row-group, table-header-group, table-footer-group, table-row, table-column-group and table-column
Inherited:      no
Percentages:    refer to width of containing block
Media:      visual
Computed value:     the percentage as specified or the absolute length

Percentages: refer to width of containing block

margin-top percentage does not change when window height decreases

The percentage works on the width of the container block, according to the css specifications

The percentage is calculated with respect to the width of the
generated box's containing block. Note that this is true for
'margin-top' and 'margin-bottom' as well.

See w3.org for more information.

Why are margin/padding percentages in CSS always calculated against width?

Transferring my comment to an answer, because it makes logical sense. However, please note that this is unfounded conjecture. The actual reasoning of why the spec is written this way is still, technically, unknown.

Element height is defined by the height of the
children. If an element has padding-top: 10% (relative to parent
height), that is going to affect the height of the parent. Since the
height of the child is dependent on the height of the parent, and the
height of the parent is dependent on the height of the child, we'll
either have inaccurate height, or an infinite loop. Sure, this only
affects the case where offset parent === parent, but still. It's an
odd case that is difficult to resolve.

Update: The last couple sentences may not be entirely accurate. The height of the leaf element (child with no children) has an effect on the height of all elements above it, so this affects many different situations.

CSS Percent size specifier sizing element to more than specified size

Read this, and then read it again: http://www.w3schools.com/css/css_boxmodel.asp

Your 'width' setting is setting only the content section - so your total width is content+margin+padding+border. So if width=50%, you really have more like 55% or so after all that (with normal, smallish margins/padding/border). If you want your div to externally take up only 50%, you need to have a no-padding/margin/border div that's 50% outside it, or any number of other solutions.

You also probably are dealing with the fact that browser rendering isn't perfect. If you want to avoid scrolling, you in general shouldn't use 100% of the width. (This is also good "Web 2.0" design, if you follow that school - you should have white space on both sides from a usability/readability standpoint).

Edit: Also, your % is relative to width, not height. See for instance, CSS fluid layout: margin-top based on percentage grows when container width increases .

How make margins between divs with a percentage width?

Just use the :last-child on the parent. See this question and answer.

article:last-child > .content {
margin-right: 0;
}

As @Shehary noted, you won't have enough space for margins, as .container is defined as 25%, and you have four = 100%.

To circumvent that, you'll have to remove the total margins out of each .content. There are only 3 margin-right, as the last is 0, so 3 * 10 = 30. 30 / 4 = 7.5. Let's round it up to 8, as fractions might cause other annoying rendering problems,

Which means that you should calc(25% - 8px) for the width (fiddle):

.content {
  background-color: #dbdbdb;
  float: left;
  height: 200px;
  margin-right: 10px;
  width: calc(25% - 8px); /** width with margin allowance **/
}

Height equal to dynamic width (CSS fluid layout)

Using jQuery you can achieve this by doing

var cw = $('.child').width();
$('.child').css({'height':cw+'px'});

Check working example at http://jsfiddle.net/n6DAu/1/

floating list with 100% width and margins

If you always want to have 30px, and not a percentage, as web-tiki said before, you could always use calc from CSS3. Browser support is fairly good (IE9+)

li {
  width:calc( 33.33% - 30px );
  margin-left:30px
}

Pay attention to spacing! calc(33.33%-30px) won't work; you actually must have spaces around hypen: calc(33.33% - 30px)

---

Related Topics