{"id":38,"date":"2007-12-19T02:29:22","date_gmt":"2007-12-18T23:29:22","guid":{"rendered":"http:\/\/www.held.org.il\/blog\/?p=38"},"modified":"2007-12-19T02:29:22","modified_gmt":"2007-12-18T23:29:22","slug":"parent-div-gets-the-child-divs-width-shrinkwrap","status":"publish","type":"post","link":"http:\/\/www.held.org.il\/blog\/2007\/12\/parent-div-gets-the-child-divs-width-shrinkwrap\/","title":{"rendered":"How can a parent DIV get the child DIV&#039;s width?"},"content":{"rendered":"<p>In the following code, I wanted the <em>parent<\/em> div to expand to the size of the <em>child<\/em>. But it doesn't work this way:<\/p>\n<p>&lt;div id=\"parent\"&gt;<br \/>\n&lt;div id=\"child\" style=\"width: 500px\"&gt;Child Text&lt;\/div&gt;<br \/>\n&lt;\/div&gt;<\/p>\n<p>Instead, the <em>parent<\/em> takes 100% of the screen width and does not shrink to the width of the <em>child.<\/em> Quite a long googling revealed some interesting facts:<\/p>\n<ul>\n<li>div is a 'block', so it always tries  to take all available width. (unlike a span which is 'inline')<\/li>\n<li>Using '<em>float: left'<\/em> in the parent, makes it \"shrink wrap\" over the child, thus not trying to take all available width.<br \/>\nadding '<em>clear: both<\/em>' will prevent the float from causing the other blocks to join the same line.<\/li>\n<li>If the parent is a <em>&lt;td&gt;<\/em>, then the \"shrink wrap\" effect takes place.. (Also with &lt;div display=\"table-cell\"&gt; on firefox, but not in IE)<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>In the following code, I wanted the parent div to expand to the size of the child. But it doesn&#8217;t work this way: &lt;div id=&#8221;parent&#8221;&gt; &lt;div id=&#8221;child&#8221; style=&#8221;width: 500px&#8221;&gt;Child Text&lt;\/div&gt; &lt;\/div&gt; Instead, the parent takes 100% of the screen width and does not shrink to the width of the child. Quite a long googling revealed [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[15],"tags":[30,55,202],"_links":{"self":[{"href":"http:\/\/www.held.org.il\/blog\/wp-json\/wp\/v2\/posts\/38"}],"collection":[{"href":"http:\/\/www.held.org.il\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.held.org.il\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.held.org.il\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"http:\/\/www.held.org.il\/blog\/wp-json\/wp\/v2\/comments?post=38"}],"version-history":[{"count":0,"href":"http:\/\/www.held.org.il\/blog\/wp-json\/wp\/v2\/posts\/38\/revisions"}],"wp:attachment":[{"href":"http:\/\/www.held.org.il\/blog\/wp-json\/wp\/v2\/media?parent=38"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.held.org.il\/blog\/wp-json\/wp\/v2\/categories?post=38"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.held.org.il\/blog\/wp-json\/wp\/v2\/tags?post=38"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}