{"id":197,"date":"2006-11-11T20:33:40","date_gmt":"2006-11-11T18:33:40","guid":{"rendered":"http:\/\/www.maratz.com\/blog\/archives\/2006\/11\/11\/ie-7-quirks-floats-and-margins\/"},"modified":"2011-05-19T11:18:02","modified_gmt":"2011-05-19T10:18:02","slug":"ie-7-quirks-floats-and-margins","status":"publish","type":"post","link":"http:\/\/www.maratz.com\/blog\/archives\/2006\/11\/11\/ie-7-quirks-floats-and-margins\/","title":{"rendered":"IE 7 quirks: floats and margins, here we go again"},"content":{"rendered":"<p><a href=\"http:\/\/webdesign.maratz.com\/lab\/ie7_ignored_float_bottom_margin\/\" title=\"See demo page\"><img loading=\"lazy\" class=\"alignleft\" src=\"\/img\/sshots\/ie7_bottom_margin_float.gif\" alt=\"Bug Screenshot\" title=\"\" width=\"210\" height=\"160\" \/><\/a> We\u2019ve been introduced with <a href=\"http:\/\/www.microsoft.com\/windows\/ie\/\" title=\"Download latest Internet Explorer version\">the latest Internet Explorer<\/a> few weeks ago and some quirks <a href=\"\/blog\/archives\/2006\/10\/23\/ie-7-quirks-round-one\/\">have been explained already<\/a>. In this article, we\u2019re dealing with a single (but pretty nasty) bug &#8211; neglected bottom margin set at the floating child element.<!--more--><\/p>\n<p>The following markup:<\/p>\n<pre>&#60;div class=\"wrapper\">\r\n    &#60;div class=\"inner\">\r\n    ... some content goes here...\r\n    &#60;\/div>\r\n&#60;\/div><\/pre>\n<p>and the corresponding CSS rules:<\/p>\n<pre>.wrapper { float: left; }\r\n.inner { float: left; margin-bottom: 30px; }<\/pre>\n<p>should make <code>.wrapper<\/code> 30 pixels higher than <code>.inner<\/code>, right?<\/p>\n<p>In IE 7 this is not a case. Instead, to achieve the same effect, one should set bottom padding at the <em>parent<\/em> element:<\/p>\n<pre>.wrapper { float: left; padding-bottom: 30px; }\r\n.inner { float: left; }<\/pre>\n<\/p>\n<p>Yes, they fixed <a href=\"http:\/\/www.positioniseverything.net\/explorer\/doubled-margin.html\">float doubled margin bug<\/a>, but brought us another one of the same sort. See <a href=\"http:\/\/webdesign.maratz.com\/lab\/ie7_ignored_float_bottom_margin\/\">demo page<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>More IE oddities<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[18],"tags":[71],"_links":{"self":[{"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/posts\/197"}],"collection":[{"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/comments?post=197"}],"version-history":[{"count":0,"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/posts\/197\/revisions"}],"wp:attachment":[{"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/media?parent=197"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/categories?post=197"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/tags?post=197"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}