CSS: Flex items are overlapping each other

Question

I created a website with several div containers (Events, News, Interviews). I want the containers to show up beneath each other. To make this possible I used display: flex and position: absolute on the flag class, but this does not seem to work.

When I removed position:absolute from flag, and applied it on the .bar class, the elements get stretched.

What am I missing to show the div's beneath each other with the correct height?

body {
  margin: 0px;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
  display: block;
}

.author-box::before,
.clearfix::before,
.entry::before,
.entry-content::before,
.footer-widgets::before,
.nav-primary::before,
.nav-secondary::before,
.pagination::before,
.site-container::before,
.site-footer::before,
.site-header::before,
.site-inner::before,
.wrap::before {
  content: ' ';
  display: table;
}
.author-box::after,
.clearfix::after,
.entry::after,
.entry-content::after,
.footer-widgets::after,
.nav-primary::after,
.nav-secondary::after,
.pagination::after,
.site-container::after,
.site-footer::after,
.site-header::after,
.site-inner::after,
.wrap::after {
  clear: both;
  content: ' ';
  display: table;
}
body {
  color: rgb(51, 51, 51);
  font-family: Lato, sans-serif;
  font-size: 18px;
  font-weight: 300;
  line-height: 1.625;
  margin: 0px;
  background-color: rgb(245, 245, 245);
}
.site-inner,
.wrap {
  margin: 0px auto;
  max-width: 1200px;
}
.site-inner {
  clear: both;
  padding-top: 40px;
}
.content-sidebar-sidebar .content-sidebar-wrap,
.sidebar-content-sidebar .content-sidebar-wrap,
.sidebar-sidebar-content .content-sidebar-wrap {
  width: 980px;
}
.content-sidebar-sidebar .content-sidebar-wrap {
  float: left;
}
.sidebar-content-sidebar .content-sidebar-wrap,
.sidebar-sidebar-content .content-sidebar-wrap {
  float: right;
}
.content {
  float: right;
  width: 800px;
}
.content-sidebar .content,
.content-sidebar-sidebar .content,
.sidebar-content-sidebar .content {
  float: left;
}
.content-sidebar-sidebar .content,
.sidebar-content-sidebar .content,
.sidebar-sidebar-content .content {
  width: 580px;
}
.full-width-content .content {
  width: 100%;
}
.featured-content .entry {
  border-bottom-width: 2px;
  border-bottom-style: solid;
  border-bottom-color: rgb(245, 245, 245);
  margin-bottom: 20px;
  padding: 0px 0px 24px;
}
.footer-widgets .entry {
  border-bottom-width: 1px;
  border-bottom-style: dotted;
  border-bottom-color: rgb(102, 102, 102);
}
.entry {
  margin-bottom: 40px;
  padding: 50px 60px;
}
.content .entry {
  background-color: rgb(255, 255, 255);
}
.entry-header .entry-meta {
  margin-bottom: 24px;
}
body {
  margin: 0px;
  background: rgb(128, 128, 128);
}
.content .entry {
  border-radius: 0.3em;
  box-shadow: rgb(79, 79, 79) 5px 5px 40px;
}
input[type="search"] {
  padding: 5px 20px;
  border-bottom-right-radius: 50px;
  border-top-left-radius: 50px;
  border: 1px solid rgb(76, 76, 76);
  width: 250px;
  background-color: rgb(103, 102, 102);
}
.content {
  width: 680px;
}
.site-inner,
.wrap {
  max-width: 1035px;
  padding-top: 0px;
}
.entry {
  padding: 30px 40px;
}
.entry-header {
  margin: -30px -40px;
  position: relative;
}
.entry-header .entry-title a {
  position: absolute;
  color: rgb(255, 255, 255);
  padding: 6px 40px;
  bottom: 12%;
  left: 0px;
  right: 0px;
  font-size: 0.63em;
  background: rgba(0, 0, 0, 0.701961);
}
.entry-header .entry-meta {
  position: absolute;
  color: rgb(255, 255, 255);
  padding: 5px;
  top: 9px;
  right: 0px;
  font-size: 0.7em;
  font-style: italic;
  background: rgba(0, 0, 0, 0.701961);
}
.entry-header .entry-title {
  margin-left: 40px;
}
.attachment-post-thumbnail {
  border-radius: 0.3em 0.3em 0px 0px;
}
.flag {
  font-size: 0.7em;
  font-weight: 700;
  padding: 3px 15px;
  color: rgb(255, 255, 255);
  border-radius: 0.4em 0px 0px 0.4em;
  margin: 10px 0px 0px -10px;
  white-space: nowrap;
  background-color: rgb(255, 51, 153);
}
.flag::after {
  content: ' ';
  position: absolute;
  left: 2px;
  top: 100%;
  border-width: 4px;
  border-style: solid;
  border-color: rgb(176, 0, 127) rgb(176, 0, 127) transparent transparent;
}
.flag::before {
  content: ' ';
  position: absolute;
  top: 0px;
  border-width: 26px 26px 0px 0px;
  border-style: solid;
  border-color: rgb(255, 51, 153) transparent transparent;
  right: -26px;
}
.flag-category {
  background-color: rgb(0, 176, 176);
}
.bar {
  display: flex;
  position: absolute;
}
.entry-header .bar {
  width: 680px; height: 220px; background: url(http://nintendo-online.de/img/bg-game-header-cover.png); }
  .flag-category: : before {
    right: -26px;
    border-style: solid;
    border-color: rgb(0, 176, 176) transparent transparent;
  }
  .flag-category::after {
    border-width: 0px 0px 27px 27px;
    border-color: transparent transparent rgb(0, 176, 176);
    top: 0px;
    left: -24px;
  }
  .bd.entry {
    padding-bottom: 10px;
    border-radius: 0.5em;
    border-style: solid;
    border-color: rgb(0, 197, 160);
  }
  .margt10.flag {
    margin: -33px -53px;
    text-transform: lowercase;
  }

Jon P · Accepted Answer

Your issue is the ::before and ::after elements being absolutely positioned which takes them out of the normal flow. Add some margin to the .flag elements to compensate, or look at using justify-content:space-between;

.flag {
  position: relative;
  font-size: .7em;
  font-weight: 700;
  padding: 3px 15px;
  color: #FFF;
  background-color: #f39;
  border-radius: .4em 0 0 .4em;
  margin: 10px 40px 0 -10px;
  white-space: nowrap;
}
.flag:after {
  content: ' ';
  position: absolute;
  left: 2px;
  top: 100%;
  border-width: 4px;
  border-style: solid;
  border-color: #B0007F #B0007F transparent transparent;
}
.flag:before {
  content: ' ';
  position: absolute;
  top: 0;
  border-width: 26px 26px 0 0;
  border-style: solid;
  border-color: #F39 transparent transparent;
  right: -26px;
}
.flag-category {
  background-color: #00b0b0;
}
.bar {
  display: flex;
  position: absolute;
  flex-direction: row;
  align-items: flex-start;
  /*justify-content:space-between;*/
}
.entry-header .bar {
  background: url(http://pexetothemes.com/demos/photolux_wp/wp-content/themes/photolux/images/bg.png); 
  width: 680px; 
  height: 220px; 
  background: url(http://nintendo-online.de/img/bg-game-header-cover.png);
}
.flag-category: before {
  right: -26px;
  border-style: solid;
  border-color: #00b0b0 transparent transparent;
}
.flag-category:after {
  border-width: 0 0 27px 27px;
  border-color: transparent transparent #00b0b0;
  top: 0;
  left: -24px;
}
.flag-category2 {
  background-color: #00b0b0;
}
.flag-category2:before {
  border-color: #00b0b0 transparent transparent;
}
.flag-category2:after {
  border-width: 4px;
  border-color: #005357 #005357 transparent transparent;
}

CSS: Flex items are overlapping each other

Answers (2)

Related Questions