Html - Alignment issues of elements

NoobGaming
September 5, 2024
210 views
3 votes
3 Answers

I need some help as I am a complete newbie when it comes to HTML and CSS.
I am trying to create something like this:

I can generate the entire container itself but the placement of the Blog Title, Blog Post Date, Blog Summary and Read More button are all formatting out bad. So far the only thing I can place correctly is the img container.

The Image below is the result I get:

  body {
  margin: 0;
  font-family: "Bai Jamjuree", sans-serif;
  /* Adjust with the exact font if found */
}


/* Style for Blog Container */

.blog-container {
  width: 1240px;
  overflow: auto;
  margin-left: auto;
  position: relative;
  left: -3px;
  margin-right: auto;
  max-width: 94%;
  /* Responsive for smaller screens */
  padding: 5px 20px;
  background-color: white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  margin-bottom: 100px;
  box-sizing: border-box;
}

.blog-post {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  margin-top: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #ddd;
}

.blog-thumbnail {
  flex: 1;
}

.blog-thumbnail img {
  width: 150px;
  height: 150px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  margin-right: 20px;
  object-fit: cover;
}

.blog-post {
  background-color: white;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 20px;
  max-width: 1200px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  text-align: left;
}

.blog-post h2 {
  font-size: 1.2em;
  margin-bottom: 20px;
  color: #333;
}

.blog-post p {
  font-size: 1em;
  color: #666;
  margin-bottom: 100px;
}

.blog-post a {
  color: #1e7cd6;
  text-decoration: none;
  font-weight: bold;
}

.blog-post a:hover {
  color: #104e8b;
}


/* Responsive Styles */

@media (max-width: 768px) {
  .blog-search-sort {
    flex-direction: column;
    gap: 10px;
  }
  .blog-post {
    width: 95%;
  }
}

.bai-jamjuree-extralight {
  font-family: "Bai Jamjuree", sans-serif;
  font-weight: 200;
  font-style: normal;
}

.bai-jamjuree-light {
  font-family: "Bai Jamjuree", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.bai-jamjuree-regular {
  font-family: "Bai Jamjuree", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.bai-jamjuree-medium {
  font-family: "Bai Jamjuree", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.bai-jamjuree-semibold {
  font-family: "Bai Jamjuree", sans-serif;
  font-weight: 600;
  font-style: normal;
}

.bai-jamjuree-bold {
  font-family: "Bai Jamjuree", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.bai-jamjuree-extralight-italic {
  font-family: "Bai Jamjuree", sans-serif;
  font-weight: 200;
  font-style: italic;
}

.bai-jamjuree-light-italic {
  font-family: "Bai Jamjuree", sans-serif;
  font-weight: 300;
  font-style: italic;
}

.bai-jamjuree-regular-italic {
  font-family: "Bai Jamjuree", sans-serif;
  font-weight: 400;
  font-style: italic;
}

.bai-jamjuree-medium-italic {
  font-family: "Bai Jamjuree", sans-serif;
  font-weight: 500;
  font-style: italic;
}

.bai-jamjuree-semibold-italic {
  font-family: "Bai Jamjuree", sans-serif;
  font-weight: 600;
  font-style: italic;
}

.bai-jamjuree-bold-italic {
  font-family: "Bai Jamjuree", sans-serif;
  font-weight: 700;
  font-style: italic;
}

a {
  text-decoration: none;
}

a.fill-div {
  display: block;
  height: 100%;
  width: 100%;
  text-decoration: none;
)

<div class="blog-container" id="blogContainer">
  <!-- Example Blog Post -->
  <div class="blog-post" data-date="2024-08-30" onclick="';" style="cursor: pointer;">
    <div class="blog-thumbnail">
      <img src="https://d150u0abw3r906.cloudfront.net/wp-content/uploads/2021/09/aerial-shot.jpg" alt="Thumbnail" />
    </div>
    <h2>How Drone Photography Can Elevate Your Real Estate Listings</h2>
    <p>August 30, 2024</p>
    <p>Unlock the Power of Aerial Views & Attract More Buyers to Your Listings</p>
    <a href="">Read more</a>
  </div>
</div>

Answers

You should change the structure a bit and use semantic tags.

In your image, you have 3 columns that you can align next to each other with Flexbox.
The semantic correct approach would be to use aside as containers for the image and the date and read more columns. The main column with your blog post would be an article.

You can let the article column span the whole available width by using flex-grow: 1.

To let the date and read more columns reach your intended layout you have to use flexbox with flex-direction: column. That way you can add margin-top: auto on the "read more" link to push it to the very bottom.

PS: You should not sue margins to spread columns apart within flexbox. Use gap instead!

section.blog-post {
  display: flex;
  gap: 1.25em;
  background-color: white;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 20px;
  max-width: 1200px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  text-align: left;
  
  aside.blog-thumbnail img {
    width: 150px;
    height: 150px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    object-fit: cover;
  }
  
  article {
    flex-grow: 1;
    h2 {
      font-size: 1.2em;
      margin-bottom: 20px;
      color: #333;
      margin-top: 0;
    }
    p {
      font-size: 1em;
      color: #666;
      margin-bottom: 100px;
    }
  }
  
  aside.blog-date {
    display: flex;
    flex-direction: column;
    time {
      color: #666;
    }
    a {
      color: #1e7cd6;
      text-decoration: none;
      font-weight: bold;
      margin-top: auto;
    }
  }
}

<main class="blog-container" id="blogContainer">
  <!-- Example Blog Post -->
  <section class="blog-post" data-date="2024-08-30" onclick="';" style="cursor: pointer;">
    <aside class="blog-thumbnail">
      <img src="https://d150u0abw3r906.cloudfront.net/wp-content/uploads/2021/09/aerial-shot.jpg" alt="Thumbnail" />
    </aside>
    <article>
      <h2>How Drone Photography Can Elevate Your Real Estate Listings</h2>
      <p>Unlock the Power of Aerial Views & Attract More Buyers to Your Listings</p>
    </article>
    <aside class="blog-date">
      <time datetime="2024-08-30">August 30, 2024</time>   
      <a href="">Read more</a>
    </aside>
  </section>
</main>

You need one more wrapper for typography elements.

body {
  margin: 0;
  font-family: "Bai Jamjuree", sans-serif;
  /* Adjust with the exact font if found */
}

/* Style for Blog Container */

.blog-container {
  width: 1240px;
  overflow: auto;
  margin-left: auto;
  position: relative;
  left: -3px;
  margin-right: auto;
  max-width: 94%;
  /* Responsive for smaller screens */
  padding: 5px 20px;
  background-color: white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  margin-bottom: 100px;
  box-sizing: border-box;
}

.blog-thumbnail img {
  width: 150px;
  height: 150px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  margin-right: 20px;
  object-fit: cover;
}

.blog-post {
  background-color: white;
  border-radius: 8px;
  padding: 20px;
  max-width: 1200px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  text-align: left;
  display: flex;
  margin-bottom: 20px;
  margin-top: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #ddd;
}

.blog-post h2 {
  font-size: 1.2em;
  margin-bottom: 20px;
  color: #333;
}

.blog-post p {
  font-size: 1em;
  color: #666;
}

.blog-post a {
  color: #1e7cd6;
  text-decoration: none;
  font-weight: bold;
}

.blog-post a:hover {
  color: #104e8b;
}

a {
  text-decoration: none;
}

/* Responsive Styles */

@media (max-width: 768px) {
  .blog-post {
    flex-direction: column;
    gap: 10px;
  }
}

<div class="blog-container" id="blogContainer">
  <!-- Example Blog Post -->
  <div class="blog-post" data-date="2024-08-30" onclick="';" style="cursor: pointer;">
    <div class="blog-thumbnail">
      <img src="https://d150u0abw3r906.cloudfront.net/wp-content/uploads/2021/09/aerial-shot.jpg" alt="Thumbnail" />
    </div>
    <div>
      <h2>How Drone Photography Can Elevate Your Real Estate Listings</h2>
      <p>August 30, 2024</p>
      <p>Unlock the Power of Aerial Views & Attract More Buyers to Your Listings</p>
      <p>Unlock the Power of Aerial Views & Attract More Buyers to Your Listings</p>

      <a href="">Read more</a>
    </div>
  </div>
</div>

Also, you have a lot of smelly CSS in your code, magic numbers like 94%. Try to make your layout fluid, instead of hardcoding fixed values. This article might help you: https://csswizardry.com/2012/11/code-smells-in-css/

I see that you have used flex to display it. I suggest you could divide it and fix it as below:

     <div class="blog-container" id="blogContainer">
        <!-- Example Blog Post -->
  <div class="blog-post" data-date="2024-08-30" onclick="';" style="cursor: pointer;">
      <div class="blog-thumbnail">
          <img src="https://d150u0abw3r906.cloudfront.net/wp-content/uploads/2021/09/aerial-shot.jpg" alt="Thumbnail" />
      </div>

      <div>
        <h2>How Drone Photography Can Elevate Your Real Estate Listings</h2>
        <p>Unlock the Power of Aerial Views & Attract More Buyers to Your Listings</p>
      </div>

      <div>
        <p>August 30, 2024</p>
        <a href="">Read more</a>
      </div>

  </div>
</div>

Please signup or login to give your own answer.

Click here to cancel reply.

Html – Alignment issues of elements

Answers