CODEWITHSUNDEEP
htmlcssflexbox
MultiDev
MultiDev

Reputation: 10649

CSS: Having trouble aligning two flex elements

I have a flex container with a background, and it contains some text consisting of vertically and horizontally center aligned content (page title) and absolute aligned content (breadcrumb).

Everything looks great when I have just the title, I've obviously got something messed up with the breadcrumb classes.

I would like the breadcrumbs to be right aligned and 25px from the top within the container (see example):

Any idea where it's going wrong?

#site-wrapper {
  background: #ececec;
}
.site-wrapper-inner {
  overflow: hidden;
  position: relative;
  background: #fff;
}
.site-wrapper-inner.contained {
  max-width: 1500px;
}
.container {
  margin: 0 auto;
  width: 100%;	
}
header .container, 
main .container {
  position: relative;
  padding: 0 30px;
  max-width: 1118px;
}
header.hero {
  position: relative;
  clear: both;
  overflow: hidden;
  height: 340px;
  margin-bottom: 50px;
  display:flex;
  align-items:center;
}
.container.hero-center {
  text-align: center;
  max-width: 560px;
}
.breadcrumbs {
  color: rgba(255,255,255,0.7);
  font-size: 0.8em;
  align-self: flex-start;
  text-align: right;
  position: absolute;
  top: 25px;
  right: 0;
}
.breadcrumb-bg {
  padding: 0.2em 1em;
  background: rgba(19,71,91,0.7);
  display: inline-block;
  border-radius: 0.25em;
}
<div id="site-wrapper">
  <div class="site-wrapper-inner container contained">
    <main id="main">
      <section>
        <header class="hero" style="background:#ccc;">
          <div class="breadcrumbs container"><div class="breadcrumb-bg">Breadcrumb</div></div>
          <div class="hero-center container">
            <h1>Center Aligned Content</h1>
          </div>
        </header>	
      </section>
    </main>
  </div>
</div>

<h1>Without Breadcrumb</h1>

<div id="site-wrapper">
  <div class="site-wrapper-inner container contained">
    <main id="main">
      <section>
        <header class="hero" style="background:#ccc;">
          <div class="hero-center container">
            <h1>Center Aligned Content</h1>
          </div>
        </header>	
      </section>
    </main>
  </div>
</div>

Upvotes: 1

Views: 123

Answers (2)

kukkuz
kukkuz

Reputation: 42352

The absolute position that you are using is being overwritten by the position: relative in this rule - header .container, main .container.

Override that with a more specific style and the alignment works fine:

header .breadcrumbs.container {
  position: absolute;
  right: 0;
  left: 0;
  width: auto;
}

See demo below: 

#site-wrapper {
  background: #ececec;
}
.site-wrapper-inner {
  overflow: hidden;
  position: relative;
  background: #fff;
}
.site-wrapper-inner.contained {
  max-width: 1500px;
}
.container {
  margin: 0 auto;
  width: 100%;	
}
header .container, 
main .container {
  position: relative;
  padding: 0 30px;
  max-width: 1118px;
}
/*ADDED THIS*/
header .breadcrumbs.container {
  position: absolute;
  right: 0;
  left: 0;
  width: auto;
}
/**/
header.hero {
  position: relative;
  clear: both;
  overflow: hidden;
  height: 340px;
  margin-bottom: 50px;
  display:flex;
  align-items:center;
}
.container.hero-center {
  text-align: center;
  max-width: 560px;
}
.breadcrumbs {
  color: rgba(255,255,255,0.7);
  font-size: 0.8em;
  align-self: flex-start;
  text-align: right;
  position: absolute;
  top: 25px;
  right: 0;
}
.breadcrumb-bg {
  padding: 0.2em 1em;
  background: rgba(19,71,91,0.7);
  display: inline-block;
  border-radius: 0.25em;
}
<div id="site-wrapper">
  <div class="site-wrapper-inner container contained">
    <main id="main">
      <section>
        <header class="hero" style="background:#ccc;">
          <div class="breadcrumbs container"><div class="breadcrumb-bg">Breadcrumb</div></div>
          <div class="hero-center container">
            <h1>Center Aligned Content</h1>
          </div>
        </header>	
      </section>
    </main>
  </div>
</div>

<h1>Without Breadcrumb</h1>

<div id="site-wrapper">
  <div class="site-wrapper-inner container contained">
    <main id="main">
      <section>
        <header class="hero" style="background:#ccc;">
          <div class="hero-center container">
            <h1>Center Aligned Content</h1>
          </div>
        </header>	
      </section>
    </main>
  </div>
</div>

Upvotes: 1

VdeVentura
VdeVentura

Reputation: 2101

Problem is somehow your position: absolute is being overwritter by something else. just set an !important to you breadcumb class so it can get it.

Found it, the container class in your breadcrumb is overwriting it, you can either set !important to the position attribute of your breadcrumb class, or remove the container class of your breadcrumb element.

Upvotes: 1

Related Questions