Category: CSS


CSS Widths

How to calculate widths for html elements in css

Seven properties that determine width of nonfloating block-level elements are:

  • border-left
  • padding-left
  • width
  • margin-left
  • padding-right
  • border-right
  • margin-right

    For any element, the total of the values must always equal the inherited width. To ensure that total width does not exceed the inherited width, adjustments will be made if necessary to one or more values. CSS1 provides that border and padding values are never adjusted. Only the width, margin-left and margin-right value can be adjusted.

    Meaning of auto depends of the type of element. For images and objects, default width is the built-in width although they may be scaled up or down. For other elements, auto depends of floats and display properties.

    • For floating elements width of auto always means 0.
    • For inline elements width is ignored completely.
    • For block elements width will be calculated using above formula.
    • For inline or floating elements, auto margin-left or margin-right means 0.
    • For block elements, auto margin-left and martin-right means maximum possible.

None of the three values are “auto”

When neither width nor margin-left nor margin-right is set to auto, the right margin is ignored and set to auto. Its value will be adjusted.

body {
width: 30em;
}

p{
width: 25em;
margin-left: 3em;
margin-right: 3em;
}

The width of P will be 25em, margin-left will be 3em and margin-right will be calculated as 30 – 25 – 3 = 2em (assuming no border and padding has been set).

One of the values is “auto”

When only one of width, margin-left, margin-right is set to auto, its value will be calculated.


body {

width: 30em;

}

p {

width: 25em;

margin-left: auto;

margin-right: 3em;

}


The width of P will be 25em, margin-right will be 3em and margin-left will be calculated as 30 – 25 – 3 = 2em (assuming no border and padding has been set).

Two or three of the values are “auto”

If width is set to auto, then the width value is calculated. It will be maximized after the considerations of margin-left and margin-right.

If width is not auto, then both margin-left and margin-right are, then the two margins will be maximized and equal after considering the width value.


body {

width: 30em;

}

p {

width: auto;

margin-left: 5em;

margin-right: auto;

}

Margin-right will be 0, margin-left will be 5em and the width will be calculated as 30 – 5 – 0 = 25em (assuming no border and padding has been set).

body {

width: 30em;

}

p {

width: 25em;

margin-left: auto;

margin-right: auto;
}

Width will be 25em, margin-left and margin-right will be calculated as (30 – 25)/2 = 2.5em each (assuming no border and padding has been set).

Keep in mind that border-left, border-right, padding-left, padding-right values are never adjusted. So a value of auto will be ignored. The width and margins are

adjusted using the provided border and padding if any using the formula

margin-left + border-left + padding-left + width + padding-right + border-right + margin-right = available width or the container's width.

Reference: ‘Cascading Style Sheets: Designing for the Web’ 2e by Hakon Wium Lie & Bert Bos, Addison-Wesley

Normal layout will lay boxes one after the other or below one another
(block or inline). Floating will shift boxes to the left or right.
Absolute positioning puts an element at the specified (left, top)
coordinates regardless of what other elements already exist at that
position. Fixed positioning will cause the element to be fixed to that
position. They stay put even when scrolling.

When using absolute or fixed the element is implcitly displayed as a
block and therefore the display property is ignored. Default value for
position is static. Elements are placed relative to their parent and the
elements that precede them. The parent or container for a fixed position
element is the computer screen. The containing block for absolute
positioned elements is the top parent, the root, unless there exists
another element such that it is the parent of this element and has a
position of absolute, relative of fixed, in which case, the absolute
coordinates are calculated based on that element.

When an absolutely positioned element is inside some other absolutely or
fixed position element, the edges of the containing block will be used
to calculate the top, left, right coordinates. For elements placed
inside a relatively positioned that is inline, the container may be
split up over several lines and thus having several boxes. In this case,
the top and left of the first box will be the top, left for the
containing block and the bottom, right for the last block will be the
bottom, right for the containing block.

Relative position positions elements away (top, left, bottom, right)
from their normal position without influencing the other elements. This
may cause overlap between elements without ‘pushing’ or ‘moving’ the
neighboring elements. Using percentages as the values for left & right
will cause the position to be calculated from the width of the block
element or the width of the containing block for inline elements.

Fixed position positions elements at the specified area no matter how
the document is scrolled. It will appear at the same position on every
page.

Using auto values for absolutely position elements will cause the
browser to set the values to approximates based on where the element
might be placed if it were normally positioned.

Using auto values for width and right for absolutely positioned elements
will cause the width to be maximized, the right to 0, simulating a right
align.

Z-Index, positioning on the z-axis

Top, left, bottom, right values allow elements to be placed on a 2-D
plane. This can lead to several elements overlapping each other. Setting
the z-index property value will allow to determine the stacking order
for overlapped elements. Normally elements are stacked in the order they
appear in the code.

Assigning a value to the z-index property will cause the element to
stacked in order in the containing block. Positive values will cause the
element to be stacked in front of the containing block positioning
elements with the higher values in the front. A negative value will
position the element behind the containing block in decreasing
magnitude. z-indexes are calculated relative to the first container that
has a z-index value other than auto.

Child nodes in html elements will inherit certain style attribute
from their parent element.

For example:

...<style type='text/css'> body {  color: green; }</style>...

<body> <div> ...  <span>   ...    <ul>     <li> ...    </ul>  </span> </div></body>...

will cause the text color for the body, div, span, ul & li elements to
be green.

Child nodes can overide the inherited value by specifying their own
value. the

<div> </div>

element in the above example can override the color to be black by
setting its color style attribute as
div { color: #000000; }
. This is similiar to the concept of overriding properties in a object
oriented programming language such as C, Java etc.

Cascading occurs when multiple styles from different sources affect the
same property for the same element. The process of determine which style
affects the elements is called cascading. Only one value will be used.
Let us examine different possible sources for conflict.

  • Web designer vs web user: users trying to change appearance
    intended by authors.
  • User vs browser: browsers have default styles for elements that
    govern how elements are to be presented.
  • Different rule in the same sheet
  • Increased weightage given to certain properties by authors.

The chain of inheritance as soon as a child node overrides the property.
Inheritance work top to bottom whereas cascade works left to right (Talk
to Lejo for more clarification). Cascading occurs only when more than
one rule is defined for the same property for the same element.
Inheritance occurs only when a rule hasnt been defined for an element.
However this does not mean the element wont have the rule because the
property in question may have a default value. Inherited value wont
apply if the element has the same rule defined.

A side effect of inheritance is not knowing what properties are being
set by the parent thus being unable to override all inherited values.

    Process of identifying the rule that applies

  • Search for selectors, a matching class attribute, element’s id (See
    writeup on CSS Selectors)
  • weight: labeling a rule with !important will cause it
    to have precedence over other non-important rules
  • Order or origin: Author’s styles will be given higher priority than
    user’s styles
  • Specificity: Specific rules will be given higher priority over
    general counterparts.

If no rules have applied after these steps then inheritance and default
values will be used respectively. Elements can also force inheritance by
explicity specifying
inherit
as the value. Combining
!important
with inherit will guarantee the parent’s value to be used over any other
applicable rule.