Question

I have a strange problem.

Background that was set by CSS for .article-container and <article> does not displays at all (neither image nor color). Background that was set for <article> children displays property.

The page: http://new.elenaakulova.com.ua/.

Or the code:

<div id="article-container">
  <article id="about-me">
    <div id="photo">
      <img src="http://placehold.it/300x404" width="300px">
    </div>
    <div id="description">
      <hgroup>
        <h2>психолог</h2>
        <h1>Вася Пупкин</h1>
      </hgroup>
      <p>Здравствуйте!</p>
    </div>
  </article>
</div>

and

#article-container {
  width: 1000px;
  margin-left: auto;
  margin-right: auto;
  background: white;
}

#article-container > article {
  background: white;
}

#about-me #description {
  float: left;
  background: blue;
}

Answer 1

You need to add overflow: hidden; to #article-container

Floats, absolutely positioned elements, inline-blocks, table-cells,
table-captions, and elements with ‘overflow’ other than ‘visible’
(except when that value has been propagated to the viewport) establish
new block formatting contexts.
In a block formatting context, each box’s left outer edge touches the left edge of the containing block (for right-to-left formatting,
right edges touch). This is true even in the presence of floats
(although a box’s line boxes may shrink due to the floats), unless the
box establishes a new block formatting context (in which case the box
itself may become narrower due to the floats).

The block formatting context clears the floats. Source: http://www.w3.org/TR/CSS2/visuren.html#block-formatting