CSS Relative Positioning and Collapsing DIV

The HTML/CSS pattern of nesting a floating div element in a div element can cause the problem of collapsing the parent div element, and the child div doesn't position as expected (i.e., relative to the parent div).

Namely, this doesn't work as expected:

<div class="parent" style="margin: auto; width: 50%;">
  <div class="child" style="float: left; left: 1em; top: 1em; width: 50%;">
  Hi!
  </div>
</div>

First problem, the parent div collapses to zero height.  There are two solutions:

1) Apply the overflow: auto style to the parent div, but this can sometimes introduce scroll bars with the nested div moves "outside" the "normal" area of the parent div.

2) Add a "clearing" empty div element.  This is more predictable, I've found, but introduces a semantically meaningless element.  E.g.:

<div class="parent" style="margin: auto; width: 50%;">
  <div class="child" style="float: left; left: 1em; top: 1em; width: 50%;">
   Hi!
  </div>
  <div class="clearing" style="clear: both; height: 1px; overflow: none;">
  </div>
</div>

The extra styles besides clear: both in the clearing div is for compatibility with old Internet Explorer 6 browsers.

Second problem, the child div is floating left, but it doesn't get nudged down and to the right by 1em each way (via setting top and left).  The solution is to set the child to have the CSS style position: relative, namely as this:

<div class="parent" style="margin: auto; width: 50%;">
  <div class="child" style="position: relative; float: left; left: 1em; top: 1em; width: 50%;">
   Hi!
  </div>
  <div class="clearing" style="clear: both; height: 1px; overflow: none;">
  </div>
</div>

It's also possible to set the child div to have position: absolute (and not floated) but it will be placed absolutely relative to the window's upper-left corner.  To make it relative to the parent div, set the parent div to have position: relative as well, as follows:

<div class="parent" style="position: relative; margin: auto; width: 50%;">
  <div class="child" style="position: absolute; left: 1em; top: 1em; width: 50%;">
   Hi!
  </div>
  <div class="clearing" style="clear: both; height: 1px; overflow: none;">
  </div>
</div>

Facebook IPO

There's so much news on how Facebook's stock dropped like a rock after the IPO on Friday May 18 when the price was defended at about $38 by the underwriters (Morgan Stanley mainly).  It's now at about $34 at the end of Monday.

Let's not forget that prior to Thursday May 17, the IPO price range was announced to be at $28 to $35 [1].  Not only that, but they also increased the size of the IPO by 25%, as I recall.  This is essentially the same as noted by the Washington Post:

"Facebook originally set a price range of $28 to $35 for its IPO, which would have valued the company at $95 billion at the high end. Last Tuesday, though, it increased the price range to $34 to $38 per share, valuing the company at as much as $104 billion.

"Then, responding to extraordinary demand from prospective investors, the company announced on Wednesday that it would add 84 million shares to the offering."

So Morgan Stanley got caught up in their own hyping up of Facebook, ups the size and price of the IPO, and now the price drops back to where they initially priced it (for a smaller number of shares).  That's not the best outcome, but it's not as if it means Facebook will go under.

Now if the price keeps falling, that's another story, but at this point, it seems a lot of people are buying on hype, so it's no surprise that some people are going to have a bad time.

[1] Facebook IPO: The art of pricing the right pop