Stretching a container with two blocks with float: left

M

Malamut2010-10-16 20:48:38

css

Malamut, 2010-10-16 20:48:38

An interesting task arose - it is necessary to lay out a block with a non-fixed width (popup), which includes two other blocks with the same unknown width, so that the inner blocks line up next to each other in a ruler and stretch the main block. The problem is this: if you specify float: left for both inner blocks, they will line up one below the other. Actually, no numerical parameters of all three blocks are known - therefore, it is impossible to somehow specify the width of anything.

Here is the simplest example:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru" dir="ltr">
<head>
  <style type="text/css">
    div.popup {
      position: absolute;
    }

    div.popup > div {
      float: left;
      white-space: pre;
    }
    </style>
</head>
<body>
  ...
  <div class="popup">
    <div>Какое-то неизвестное содержимое</div>
    <div>Ещё какое-то неизвестное содержимое</div>
  </div>
  ...
</body>
</html>

As a result, we get one line under the other, but it is necessary that they be in one line next to each other.

Reply

Answer the question

In order to leave comments, you need to log in

4 answer(s)

N

nuit, 2010-10-17
@nuit

/*
* Gecko hack; Pre-FF3 Gecko uses -moz-inline-box instead of inline-block.
*/
html>body .goog-inline-block {
  display: -moz-inline-box; /* Ignored by FF3 and later. */
  display: inline-block /* Ignored by pre-FF3 Gecko. */
}
/*
* default rule; only Safari, Webkit, and Opera handle it without hacks.
*/
.goog-inline-block {
  position: relative;
  display: inline-block
}
/*
* Pre-IE7 IE hack. On IE, "display: inline-block" only gives the element
* layout, but doesn't give it inline behavior. Subsequently setting display
* to inline does the trick.
*/
* html .goog-inline-block {
  display: inline;
}
/*
* IE7-only hack. On IE, "display: inline-block" only gives the element
* layout, but doesn't give it inline behavior. Subsequently setting display
* to inline does the trick.
*/
*:first-child+html .goog-inline-block {
  display: inline;
}

Z

Zitrix, 2010-10-22
@Zitrix

a bit late, knesh, but you can set the overflow: hidden container if the width and height are not specified