{"id":155,"date":"2009-09-16T14:10:58","date_gmt":"2009-09-16T20:10:58","guid":{"rendered":"http:\/\/www.n8williams.com\/devblog\/?p=155"},"modified":"2009-09-16T14:10:58","modified_gmt":"2009-09-16T20:10:58","slug":"css-vertical-overlapping-of-floating-divs","status":"publish","type":"post","link":"https:\/\/n8williams.com\/devblog\/css\/css-vertical-overlapping-of-floating-divs","title":{"rendered":"CSS Vertical Overlapping of floating divs"},"content":{"rendered":"<p>I thought this involved some trickiness. I needed to have a row of floating divs have the content underneath it pulled up over it, just a little bit, so that some body tabs appeared to the right of one of the floating images in the header.<\/p>\n<p>After much testing and trial and error I figured out that the content below overlaps the content above depending on the dimensions of the div above it. The content below will STOP overlapping when it hits the image above UNLESS you <strong>make the height of the above div (that contains the image\/content) to be smaller than the image\/content itself<\/strong>. It appears by default, the height of the div containing the image is the same as the image (makes sense).<\/p>\n<p>So the trickiness is in fooling the div below to overlap the div above, when the div below sees the above div as smaller in height than the image it contains.<\/p>\n<p>I&#8217;ll post my html in the off-chance that someone can find and use this info.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>I thought this involved some trickiness. I needed to have a row of floating divs have the content underneath it pulled up over it, just a little bit, so that some body tabs appeared to the right of one of the floating images in the header. After much testing and trial and error I figured &hellip; <a href=\"https:\/\/n8williams.com\/devblog\/css\/css-vertical-overlapping-of-floating-divs\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;CSS Vertical Overlapping of floating divs&#8221;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[6],"tags":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v20.11 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>CSS Vertical Overlapping of floating divs - The Dev Pages<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/n8williams.com\/devblog\/css\/css-vertical-overlapping-of-floating-divs\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS Vertical Overlapping of floating divs - The Dev Pages\" \/>\n<meta property=\"og:description\" content=\"I thought this involved some trickiness. I needed to have a row of floating divs have the content underneath it pulled up over it, just a little bit, so that some body tabs appeared to the right of one of the floating images in the header. After much testing and trial and error I figured &hellip; Continue reading &quot;CSS Vertical Overlapping of floating divs&quot;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/n8williams.com\/devblog\/css\/css-vertical-overlapping-of-floating-divs\" \/>\n<meta property=\"og:site_name\" content=\"The Dev Pages\" \/>\n<meta property=\"article:published_time\" content=\"2009-09-16T20:10:58+00:00\" \/>\n<meta name=\"author\" content=\"Nate Admin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@admin\" \/>\n<meta name=\"twitter:site\" content=\"@admin\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Nate Admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/n8williams.com\/devblog\/css\/css-vertical-overlapping-of-floating-divs#article\",\"isPartOf\":{\"@id\":\"https:\/\/n8williams.com\/devblog\/css\/css-vertical-overlapping-of-floating-divs\"},\"author\":{\"name\":\"Nate Admin\",\"@id\":\"https:\/\/n8williams.com\/devblog\/#\/schema\/person\/1c31624786b5382f1a811f0a01985757\"},\"headline\":\"CSS Vertical Overlapping of floating divs\",\"datePublished\":\"2009-09-16T20:10:58+00:00\",\"dateModified\":\"2009-09-16T20:10:58+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/n8williams.com\/devblog\/css\/css-vertical-overlapping-of-floating-divs\"},\"wordCount\":179,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/n8williams.com\/devblog\/#\/schema\/person\/1c31624786b5382f1a811f0a01985757\"},\"articleSection\":[\"CSS and Stylesheeting\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/n8williams.com\/devblog\/css\/css-vertical-overlapping-of-floating-divs#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/n8williams.com\/devblog\/css\/css-vertical-overlapping-of-floating-divs\",\"url\":\"https:\/\/n8williams.com\/devblog\/css\/css-vertical-overlapping-of-floating-divs\",\"name\":\"CSS Vertical Overlapping of floating divs - The Dev Pages\",\"isPartOf\":{\"@id\":\"https:\/\/n8williams.com\/devblog\/#website\"},\"datePublished\":\"2009-09-16T20:10:58+00:00\",\"dateModified\":\"2009-09-16T20:10:58+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/n8williams.com\/devblog\/css\/css-vertical-overlapping-of-floating-divs#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/n8williams.com\/devblog\/css\/css-vertical-overlapping-of-floating-divs\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/n8williams.com\/devblog\/css\/css-vertical-overlapping-of-floating-divs#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/n8williams.com\/devblog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS Vertical Overlapping of floating divs\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/n8williams.com\/devblog\/#website\",\"url\":\"https:\/\/n8williams.com\/devblog\/\",\"name\":\"The Dev Pages\",\"description\":\"A knowledge base for web applications development (and beyond)\",\"publisher\":{\"@id\":\"https:\/\/n8williams.com\/devblog\/#\/schema\/person\/1c31624786b5382f1a811f0a01985757\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/n8williams.com\/devblog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/n8williams.com\/devblog\/#\/schema\/person\/1c31624786b5382f1a811f0a01985757\",\"name\":\"Nate Admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/n8williams.com\/devblog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/19d7bc7602072ac846e912622704a628?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/19d7bc7602072ac846e912622704a628?s=96&d=mm&r=g\",\"caption\":\"Nate Admin\"},\"logo\":{\"@id\":\"https:\/\/n8williams.com\/devblog\/#\/schema\/person\/image\/\"},\"sameAs\":[\"http:\/\/n8williams.com\",\"https:\/\/twitter.com\/admin\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"CSS Vertical Overlapping of floating divs - The Dev Pages","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/n8williams.com\/devblog\/css\/css-vertical-overlapping-of-floating-divs","og_locale":"en_US","og_type":"article","og_title":"CSS Vertical Overlapping of floating divs - The Dev Pages","og_description":"I thought this involved some trickiness. I needed to have a row of floating divs have the content underneath it pulled up over it, just a little bit, so that some body tabs appeared to the right of one of the floating images in the header. After much testing and trial and error I figured &hellip; Continue reading \"CSS Vertical Overlapping of floating divs\"","og_url":"https:\/\/n8williams.com\/devblog\/css\/css-vertical-overlapping-of-floating-divs","og_site_name":"The Dev Pages","article_published_time":"2009-09-16T20:10:58+00:00","author":"Nate Admin","twitter_card":"summary_large_image","twitter_creator":"@admin","twitter_site":"@admin","twitter_misc":{"Written by":"Nate Admin","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/n8williams.com\/devblog\/css\/css-vertical-overlapping-of-floating-divs#article","isPartOf":{"@id":"https:\/\/n8williams.com\/devblog\/css\/css-vertical-overlapping-of-floating-divs"},"author":{"name":"Nate Admin","@id":"https:\/\/n8williams.com\/devblog\/#\/schema\/person\/1c31624786b5382f1a811f0a01985757"},"headline":"CSS Vertical Overlapping of floating divs","datePublished":"2009-09-16T20:10:58+00:00","dateModified":"2009-09-16T20:10:58+00:00","mainEntityOfPage":{"@id":"https:\/\/n8williams.com\/devblog\/css\/css-vertical-overlapping-of-floating-divs"},"wordCount":179,"commentCount":0,"publisher":{"@id":"https:\/\/n8williams.com\/devblog\/#\/schema\/person\/1c31624786b5382f1a811f0a01985757"},"articleSection":["CSS and Stylesheeting"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/n8williams.com\/devblog\/css\/css-vertical-overlapping-of-floating-divs#respond"]}]},{"@type":"WebPage","@id":"https:\/\/n8williams.com\/devblog\/css\/css-vertical-overlapping-of-floating-divs","url":"https:\/\/n8williams.com\/devblog\/css\/css-vertical-overlapping-of-floating-divs","name":"CSS Vertical Overlapping of floating divs - The Dev Pages","isPartOf":{"@id":"https:\/\/n8williams.com\/devblog\/#website"},"datePublished":"2009-09-16T20:10:58+00:00","dateModified":"2009-09-16T20:10:58+00:00","breadcrumb":{"@id":"https:\/\/n8williams.com\/devblog\/css\/css-vertical-overlapping-of-floating-divs#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/n8williams.com\/devblog\/css\/css-vertical-overlapping-of-floating-divs"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/n8williams.com\/devblog\/css\/css-vertical-overlapping-of-floating-divs#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/n8williams.com\/devblog\/"},{"@type":"ListItem","position":2,"name":"CSS Vertical Overlapping of floating divs"}]},{"@type":"WebSite","@id":"https:\/\/n8williams.com\/devblog\/#website","url":"https:\/\/n8williams.com\/devblog\/","name":"The Dev Pages","description":"A knowledge base for web applications development (and beyond)","publisher":{"@id":"https:\/\/n8williams.com\/devblog\/#\/schema\/person\/1c31624786b5382f1a811f0a01985757"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/n8williams.com\/devblog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":["Person","Organization"],"@id":"https:\/\/n8williams.com\/devblog\/#\/schema\/person\/1c31624786b5382f1a811f0a01985757","name":"Nate Admin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/n8williams.com\/devblog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/19d7bc7602072ac846e912622704a628?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/19d7bc7602072ac846e912622704a628?s=96&d=mm&r=g","caption":"Nate Admin"},"logo":{"@id":"https:\/\/n8williams.com\/devblog\/#\/schema\/person\/image\/"},"sameAs":["http:\/\/n8williams.com","https:\/\/twitter.com\/admin"]}]}},"_links":{"self":[{"href":"https:\/\/n8williams.com\/devblog\/wp-json\/wp\/v2\/posts\/155"}],"collection":[{"href":"https:\/\/n8williams.com\/devblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/n8williams.com\/devblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/n8williams.com\/devblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/n8williams.com\/devblog\/wp-json\/wp\/v2\/comments?post=155"}],"version-history":[{"count":1,"href":"https:\/\/n8williams.com\/devblog\/wp-json\/wp\/v2\/posts\/155\/revisions"}],"predecessor-version":[{"id":156,"href":"https:\/\/n8williams.com\/devblog\/wp-json\/wp\/v2\/posts\/155\/revisions\/156"}],"wp:attachment":[{"href":"https:\/\/n8williams.com\/devblog\/wp-json\/wp\/v2\/media?parent=155"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/n8williams.com\/devblog\/wp-json\/wp\/v2\/categories?post=155"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/n8williams.com\/devblog\/wp-json\/wp\/v2\/tags?post=155"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}