Html Question posted in
Some basic documentation can be found here.

Html – Vertical Alignment of text inside a container, that is nested within another container

Im using containers and have a div with data-type="links-outercontainer" that has nested inside it 3 further divs with data attributes:

links-lowerleftcontainer, links-lowercentrecontainer, links-lowerrightcontainer

This then allows me to add description text to the links-lowerleftcontainer and links-lowerrightcontainer columns, links-lowercentrecontainer is essentially a spacer column.

All looks as I want it, except I’m struggling to vertically align so the text in links-lowerleftcontainer and links-lowerrightcontainer is positioned vertically at the top. see below the
Image showing the problem

I’ve put some borders around to show links-lowerleftcontainer and links-lowerrightcontainer.
I’ve tried using:

align-items: center      
justify-content: flex-start     
align-content: flex-start

in links-lowerleftcontainer and also the higher level links-lowercontainer, but no joy.
I’m sure I’m missing something simple to be able to align to the top. Hoping someone can point me in the right direction.

I’ve included the HTML and CSS snippets below:

.container[data-type="links-outercontainer"] {
  container-type: inline-size;
  flex-direction: column;
  padding: 0px 3px 0px 3px;
  display: flex;
  max-inline-size: 1140px;
  margin: auto;
  gap: 0 0;
  border: solid 1px rgba(255, 0, 0, 0.75);
  border-radius: 5px;
}

.container[data-type="links-titlecontainer"] {
  container-type: inline-size;
  flex-direction: column;
  /*border: solid 1px blue;*/
  padding: 0px 0px 0px 0px;
  display: flex;
  width: 100%;
  margin: auto;
  gap: 0 0;
}

.links-title {
  color: rgba(255, 0, 0, 0.75);
  font-family: "helvetica";
  text-align: left;
  padding: 3px 0px 3px 0px;
  line-height: 1em;
}

.container[data-type="links-uppercontainer"] {
  container-type: inline-size;
  flex-direction: row;
  padding: 0px 0px 0px 0px;
  display: flex;
  width: 100%;
  margin: auto;
  gap: 0 0;
  /*border: solid 1px rgba(2,0,0,0.75);*/
}

.container[data-type="links-upperleftcontainer"] {
  container-type: inline-size;
  flex-direction: column;
  /*border: solid 1px rgb(128 128 128);*/
  padding: 0px 0px 0px 0px;
  display: flex;
  width: 48%;
  margin: auto;
  gap: 0 0;
}

.container[data-type="links-uppercentrecontainer"] {
  container-type: inline-size;
  flex-direction: column;
  /*border: solid 1px rgb(255 106 0);*/
  padding: 0px 0px 0px 0px;
  display: flex;
  width: 4%;
  margin: auto;
  gap: 0 0;
}



.container[data-type="links-upperrightcontainer"] {
  container-type: inline-size;
  flex-direction: column;
  /*border: solid 1px rgb(128 128 128);*/
  padding: 0px 0px 0px 0px;
  display: flex;
  width: 48%;
  margin: auto;
  gap: 0 0;
}

.links-websitename {
  color: #000000;
  font-family: "helvetica";
  text-align: left;
  padding: 0px 0px 0px 0px;
  line-height: 1.5em;
}


.container[data-type="links-lowercontainer"] {
  container-type: inline-size;
  flex-direction: row;
  padding: 0px 0px 0px 0px;
  display: flex;
  width: 100%;
  margin: auto;
  gap: 0 0;
  border: solid 1px rgba(2, 0, 0, 0.75);
  /*    align-items: center;
    justify-content: flex-start;
    align-content: flex-start;
    vertical-align: top;
    text-align: justify;*/
}

.container[data-type="links-lowerleftcontainer"] {
  container-type: inline-size;
  flex-direction: column;
  border: solid 1px rgb(182 255 0);
  padding: 0px 0px 0px 0px;
  display: flex;
  width: 48%;
  margin: auto;
  gap: 0 0;
}

.container[data-type="links-lowercentrecontainer"] {
  container-type: inline-size;
  flex-direction: column;
  /*border: solid 1px rgb(255 106 0);*/
  padding: 0px 0px 0px 0px;
  display: flex;
  width: 4%;
  margin: auto;
  gap: 0 0;
}

.container[data-type="links-lowerrightcontainer"] {
  container-type: inline-size;
  flex-direction: column;
  border: solid 1px rgb(182 255 0);
  padding: 0px 0px 0px 0px;
  display: flex;
  width: 48%;
  margin: auto;
  gap: 0 0;
}

.links-websitedescription {
  color: #000000;
  font-family: "helvetica";
  /*text-align: justify;*/
  padding: 0px 0px 5px 0px;
  line-height: 1.5em;
  /*align-content: start;*/
  /*vertical-align: bottom;*/
}

/*---Desktop Viewport---*/
@media(min-width: 1024px) {
  .links-title {
    font-size: 25px;
    font-weight: 600;
  }

  .links-websitename {
    font-size: 15px;
    font-weight: 600;
  }

  .links-websitedescription {
    font-size: 15px;
    font-weight: 400;
  }
}

/*---Tablet Viewport---*/
@media(max-width: 1023px) {
  .links-title {
    font-size: 20px;
    font-weight: 600;
  }

  .links-websitename {
    font-size: 13px;
    font-weight: 600;
  }

  .links-websitedescription {
    font-size: 13px;
    font-weight: 400;
  }
}

/*---Mobile Viewport---*/
@media(max-width: 767px) {
  .links-title {
    font-size: 16px;
    font-weight: 600;
  }

  .links-websitename {
    font-size: 12px;
    font-weight: 600;
  }

  .links-websitedescription {
    font-size: 12px;
    font-weight: 400;
  }
}
<section>
  <div class="container" data-type="links-outercontainer">
    <div class="container" data-type="links-titlecontainer">
      <p class="links-title">World War 2 Links</p>
    </div>
    <div class="container" data-type="links-uppercontainer">
      <div class="container" data-type="links-upperleftcontainer">
        <!--<a href="https://www.iwm.org.uk/">-->
        <p class="links-websitename">Imperial War Museums</p>
        <!--</a>-->
      </div>
      <div class="container" data-type="links-uppercentrecontainer"></div>
      <div class="container" data-type="links-upperrightcontainer">
        <!--<a href="https://www.nationalww2museum.org/">-->
        <p class="links-websitename">The National WWII Museum - New Orleans</p>
        <!--</a>-->
      </div>
    </div>
    <div class="container" data-type="links-lowercontainer">
      <div class="container" data-type="links-lowerleftcontainer">
        <p class="links-websitedescription">Imperial War Museums explores conflict from WW1 to the present day. Visit one of our 5 sites. Explore our archives to discover real stories of modern war</p>
      </div>
      <div class="container" data-type="links-lowercentrecontainer"></div>
      <div class="container" data-type="links-lowerrightcontainer">
        <p class="links-websitedescription">The National WWII Museum tells the story of the American experience in the war that changed the world—why it was fought, how it was won, and what it means today—so that all generations will understand the price of freedom and be inspired by what they learn.</p>
      </div>
    </div>
  </div>
</section>
Tags:

2

Answers


  1. 0

    You have a margin:auto on .container[data-type="links-lowerleftcontainer"] which is automatically centering it.

    Removing that delcaration fixes the issue. See code and screenshot.

    .container[data-type="links-lowerleftcontainer"] {
  container-type: inline-size;
  flex-direction: column;
  border: solid 1px rgb(182 255 0);
  padding: 0px 0px 0px 0px;
  display: flex;
  width: 48%;
  margin: auto; // remove this
  gap: 0 0;
}

    enter image description here

    Login or Signup to reply.
  2. 0

    Pardon my intrusion and high handedness here.
    You can just use classes not the data attributes for style – you may have them for another reason but this question is about style only.

    You don’t need the center for spacing, that is what gap is for so I used gap:1em; for that and removed the element and CSS for that entirely.

    You can use ONE place for the container flex, then just put the specifics on the ones for padding, borders etc.

    I used a more generic class for the "content" and header blocks and just set them all with one css to 48% .container.links-container { width: 48%; }

    To IMHO enhance clarity I moved the text styling to the top – looks like you might set the body for the font family instead but I left that in the three places as it probably needs "more" for arial and sans-serif for fallbacks also perhaps.

    With this change the margin-auto is not needed so I removed it from everywhere.

    .links-title {
  color: rgba(255, 0, 0, 0.75);
  font-family: "helvetica";
  text-align: left;
  padding: 3px 0px 3px 0px;
  line-height: 1em;
}

.links-websitename {
  color: #000000;
  font-family: "helvetica";
  text-align: left;
  padding: 0;
  line-height: 1.5em;
}

.links-websitedescription {
  color: #000000;
  font-family: "helvetica";
  padding: 0px 0px 5px 0px;
  line-height: 1.5em;
}

.container {
  container-type: inline-size;
  flex-direction: column;
  display: flex;
  gap: 0;
  border-radius: 5px;
  padding: 0;
}

.container.links-outercontainer {
  max-inline-size: 1140px;
  padding: 0px 3px 0px 3px;
  border: solid 1px rgba(255, 0, 0, 0.75);
}

.container.links-titlecontainer {
  width: 100%;
}

.container.links-uppercontainer,
.container.links-lowercontainer {
  flex-direction: row;
  width: 100%;
  gap: 1em;
}

.container.links-container {
  width: 48%;
}

.container.links-lowercontainer {
  border: solid 1px rgba(2, 0, 0, 0.75);
}

.container.links-lowercontainer .container.links-container {
  border: solid 1px rgb(182 255 0);
}

/*---Desktop Viewport---*/
@media(min-width: 1024px) {
  .links-title {
    font-size: 25px;
    font-weight: 600;
  }

  .links-websitename {
    font-size: 15px;
    font-weight: 600;
  }

  .links-websitedescription {
    font-size: 15px;
    font-weight: 400;
  }
}

/*---Tablet Viewport---*/
@media(max-width: 1023px) {
  .links-title {
    font-size: 20px;
    font-weight: 600;
  }

  .links-websitename {
    font-size: 13px;
    font-weight: 600;
  }

  .links-websitedescription {
    font-size: 13px;
    font-weight: 400;
  }
}

/*---Mobile Viewport---*/
@media(max-width: 767px) {
  .links-title {
    font-size: 16px;
    font-weight: 600;
  }

  .links-websitename {
    font-size: 12px;
    font-weight: 600;
  }

  .links-websitedescription {
    font-size: 12px;
    font-weight: 400;
  }
}
    <section>
  <div class="container links-outercontainer">
    <div class="container links-titlecontainer">
      <p class="links-title">World War 2 Links</p>
    </div>
    <div class="container links-uppercontainer">
      <div class="container links-container">
        <p class="links-websitename">Imperial War Museums</p>
      </div>
      <div class="container links-container">
        <p class="links-websitename">The National WWII Museum - New Orleans</p>
      </div>
    </div>
    <div class="container links-lowercontainer">
      <div class="container links-container">
        <p class="links-websitedescription">Imperial War Museums explores conflict from WW1 to the present day. Visit one of our 5 sites. Explore our archives to discover real stories of modern war</p>
      </div>
      <div class="container links-container">
        <p class="links-websitedescription">The National WWII Museum tells the story of the American experience in the war that changed the world—why it was fought, how it was won, and what it means today—so that all generations will understand the price of freedom and be inspired by what they learn.</p>
      </div>
    </div>
  </div>
</section>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search