CODEWITHSUNDEEP
htmlcssalignmenttext-alignment
Adam Thompson
Adam Thompson

Reputation: 457

Limiting the width of an html block to that of a sibling

I'm working on my portfolio, and I'm trying to add some bio text. I want everything to be aligned with my name. I've been successful at making a short tagline line up, but when I add a block with a lot of text, everything aligns to that block, or to the parent.

How can I restrict the width of the parent ( to that of the headline

I've put together a Codepen to demonstrate what I mean.

I'd preferably like to do it without JS

Snippet (doesn't look great in the small window):

header {
  display: inline-block;
  width: 100%;
  margin: 16px 0;
  color: #333;
  text-align: center;
}

header .header-contents {
  margin: auto;
  max-width: 920px;
}

header .header-contents .title {
  display: inline-block;
  font-family: sans-serif;
  font-weight: 400;
  font-size: 96px;
}

header .header-contents .tagline {
  display: block;
  text-align: right;
  font-family: sans-serif;
  font-weight: 300;
  font-size: 36px;
}

header a {
  color: black;
  text-decoration: none;
}

header a:hover {
  text-decoration: none;
}

.bio-text {
  text-align: center;
  font-family: sans-serif;
  font-size: 18px;
  line-height: 2em;
  font-weight: 300;
  margin: 16px auto;
}
<header>
  <div class="header-contents">
    <div class="title">
      <a href="./">First Lastname</a>
      <div class="tagline">
        Tagline goes here
      </div>
      <!--    putting .bio-text here moves the tagline to the right margin    -->
    </div>
    <div class="bio-text" id="about">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ut enim ad minim.</p>
    </div>
  </div>
</header>

Upvotes: 1

Views: 49

Answers (1)

Andrei Vorsa
Andrei Vorsa

Reputation: 171

Try to use flex:

HTML:

header {
  display: flex;
  flex-direction: row;
  width: 100%;
  margin: 16px 0;
  color: #333;
  text-align: center;
}

header .header-space {
  flex: 1;
}

header .header-contents {
  flex: 0;
  margin: auto;
  max-width: 960px;
}

header .header-contents .myname {
  white-space: nowrap;
}

header .header-contents .title {
  font-family: sans-serif;
  font-weight: 400;
  font-size: 96px;
}

header .header-contents .tagline {
  display: block;
  text-align: right;
  font-family: sans-serif;
  font-weight: 300;
  font-size: 36px;
}

header a {
  color: black;
  text-decoration: none;
}

header a:hover {
  text-decoration: none;
}

header .bio-text {
  width: inherit;
  text-align: center;
  font-family: sans-serif;
  font-size: 18px;
  line-height: 2em;
  font-weight: 300;
  margin: 16px auto;
}
<header>
  <div class="header-space"></div>
  <div class="header-contents">
    <div class="title">
      <div class="myname">
        <a href="./">First Lastname</a>
      </div>
      <div class="tagline">Tagline goes here</div>
      <div class="bio-text" id="about">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ut enim ad minim.</p>
      </div>
    </div>
  </div>
  <div class="header-space"></div>
</header>

Upvotes: 1

Related Questions