A Pen by Niels Joubert.

Inconsistent-Vertical-vs-Horizontal-Boxes-in-CSS.markdown

Inconsistent Vertical vs Horizontal Boxes in CSS

A Pen by Niels Joubert on CodePen.

License.

index.html

<p>
  We are going to attempt to make three main boxes with one child box, and stack them both vertically and horizontally. CSS treats vertically stacked boxes as you would expect, by having children be contained within and only affect its parent. CSS treats horizontally stacked boxes as text elements, with its children flattened into the parent's context and leaking its influence into the surrounding tree. This sucks. inline-block is a move in the right direction, but isn't a perfect containment and introduces whitespace sensitivity.
  
</p>

<h1>Experiment 1: blockContainer </h1>
<div id="blockcontainer">
  
  <div id="b1">
    block_1
  </div>
  <div id="b2">
    block_2
    <div id="b2_inside">block_inside_block_2</div>
  </div>
  <div id="b3">
  block_3
  </div>
  
</div>

<h1>Experiment 2: inlineContainer </h1>
<div id="inlinecontainer">
  
  <span id="i1">
    inline_1
  </span>
  <span id="i2">
    inline_2
    <div id="i2_inside">inline_inside_inline_2</div>
  </span>
  <span id="i3">
  inline_3
  </span>
  
</div>


<h1>Experiment 3: inlineBlockContainer </h1>
<div id="inlineblockcontainer">
  
  <span id="ib1">
    inlineblock_1
  </span>
  
  <span id="ib2">inlineblock_2
    <div id="ib2_inside">inlineblock_inside_inline_2</div>
  </span>
  
  <span id="ib3">
  inlineblock_3
  </span>
  
</div>

style.css

/*

INCONSISTENCY BETWEEN VERTICALLY AND HORITONTALLY STACKED ELEMENTS IN CSS:

div elements are stacked vertically, and define a new box context for their children. They have a defineable width or height.

span elements are stacked horizonally, but does not define a new context for their children, thus their children are arranged in the same context as itself. They do not have a definable width or height and take on the size of their content.

blockContainer: The first 4 divs (of which 1 is nested), appear vertically stacked, with the nested div not affecting the 3 outer ones. 

inlineContainer: The second set of 3 spans (with one nested div), appear partially inline, but the **nested** div affects the arrangement of the parent inline elements by stacking them vertically above and below the div, even though this div is a child of the inline element

inlineBlockContainer: The third set of 3 spans (with one nested div), appear horizontally stacked without the nested div forcing a linebreak, as expected. The inner div *does still* affect the parent layout by changing the relative baselines, and the elements are suddenly whitespace-aware (unlike almost all of html & css), thus the newline in HTML causes a space between these boxes (which it does not for block elements such as divs)

Floating elements removed them from the layout of their parents, which means that the parent element is collapsed as if the children elements are no longer children - the are removed from the layout flow. This makes it difficult to have floats as children elements inside complicated layouts without a prefixed size.

*/

#ib1, #ib2, #ib3 {
  display: inline-block;
}

/* 
Below is pretty-printing stuff, not relevant for demo 
*/
div {
  opacity: 0.9;
}


#b1, #b2, #b3, #i1, #i2, #i3, #ib1, #ib2, #ib3 {
  width: 200px;
  height:200px;
}

#b1, #i1, #ib1 {
  background: #ff0;
}
#b2, #i2, #ib2 {
  background: #0ff;   
}
#b2_inside, #i2_inside, #ib2_inside {
  background: #f0f;
}
#b3, #i3, #ib3 {
  background: #00f;     
}

Change the CSS rule for the blocks to the following.

ib1, #ib2, #ib3 {

display: inline-block;
vertical-align: top;
}

Your problem was that the boxes in the outer inline context were aligning themselves vertically on the text baseline, which is a sensible default in an inline context, but not what you wanted.

This is how I was doing my tree-view until I got frustrated with the way box widths were behaving (I couldn't easily get them to expand to fill available horizontal space) and switched to tables.