Stretching container two blocks with float: left

Question

Stretching container two blocks with float: left

Warning: count(): Parameter must be an array or an object that implements Countable in /home/styllloz/public_html/qa-theme/donut-theme/qa-donut-layer.php on line 274

42 views

There was an interesting challenge — design a block with a non-fixed width (popup) that includes two other blocks with all the same unknown width, so that the indoor units lined up next to each other lined, and stretched the main unit. Here is the problem: if you specify both the inner blocks of float: left, they'll line up under each other. Actually no numeric parameters of all three units is unknown — therefore, to specify the width of anything is impossible.

Here is a simple example:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">div.popup {position: absolute;}div.popup > div {float: left;white-space: pre;}... Some unknown contentSome unknown content...

The result is one line under another, and it is necessary that they were in a line next to each other.

asked Mar 20, 2019 by Malamut | 42 views

4 Answers

Related questions

0 like 0 dislike

3 answers

How to center the blocks with float:left?

asked May 4, 2019 by c0nrade

0 like 0 dislike

1 answer

Stretching of the left block of the right height, how to do?

asked Jun 6, 2019 by ws17

0 like 0 dislike

3 answers

Uniform stretching of the blocks, how to do?

asked Apr 27, 2019 by timers

0 like 0 dislike

1 answer

Why doesn't the float:left from the p nested in div with a large enough text?

asked Apr 5, 2019 by dvorkot

0 like 0 dislike

2 answers

As you have elements with float:left to make it so that when one element above another, the third element against another, and was not on a new line?

asked Jun 7, 2019 by sorry_i_noob

Malamut · Answer 1 · 2019-03-22T13:31:31+0000

As always: itself asked — itself I answer. Enough as always one pill:
\r
\r

div.popup > div { display: inline-block; vertical-align: text-top; }

\r
Unfortunately, IE6 and 7 as always is in the big wood, but for me it is absolutely not critical.

xaOz · Answer 2 · 2019-03-22T13:31:31+0000

Although it is possible to work even in IE6/7. Cm. the comment about inline-block here at the bottom: htmlbook.ru/css/display

Malamut · Answer 3 · 2019-03-22T13:31:31+0000

/* * 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; }

nuit · Answer 4 · 2019-03-22T13:31:31+0000

too late, knes, but the container is overflow: hidden set, if width and height not specified

Stretching container two blocks with float: left

Please log in or register to add a comment.

Please log in or register to answer this question.

4 Answers

Please log in or register to add a comment.

Please log in or register to add a comment.

Please log in or register to add a comment.

Please log in or register to add a comment.

Related questions

Most popular tags