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
0 like 0 dislike
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.
by | 42 views

4 Answers

0 like 0 dislike
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.
by
0 like 0 dislike
Although it is possible to work even in IE6/7. Cm. the comment about inline-block here at the bottom: htmlbook.ru/css/display
by
0 like 0 dislike
/* * 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; } 
by
0 like 0 dislike
too late, knes, but the container is overflow: hidden set, if width and height not specified
by

Related questions

0 like 0 dislike
3 answers
0 like 0 dislike
1 answer
0 like 0 dislike
3 answers
0 like 0 dislike
1 answer
110,608 questions
257,186 answers
0 comments
27,943 users