Deprecated: Function get_magic_quotes_gpc() is deprecated in /home/styllloz/public_html/qa-include/qa-base.php on line 1175

Warning: session_start(): Cannot start session when headers already sent in /home/styllloz/public_html/qa-include/app/users.php on line 162

Warning: Cannot modify header information - headers already sent by (output started at /home/styllloz/public_html/qa-include/qa-base.php:1175) in /home/styllloz/public_html/qa-include/app/users.php on line 1267

Warning: Cannot modify header information - headers already sent by (output started at /home/styllloz/public_html/qa-include/qa-base.php:1175) in /home/styllloz/public_html/qa-include/app/page.php on line 356
Stretching container two blocks with float: left - code-flow.club | Q&A

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
50 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 | 50 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
35,182 users