Search code examples
javascripthtmlcssfrontendcss-grid

align image and text side by side and setting the text max height to img hieght

I cant figure out how to position 3 elements inside a div container(css grid), and keep the page responsive.

  1. title(purple in the img)
  2. photo
  3. comments(green in the img)

the flow i want to achieve

the problem is, if i change the window size, the comments section do not overflow, instead its in-large the div container.

the problem

instad its need to look like this : the right way

i succeeded to achieve that with max-height: and overflow:scroll, but i believe there must be an easier way(for the max-height part, of course), and more practical.

.post-container {
  background-color: rgb(0, 224, 255);
  display: grid;
  grid-template-areas: 'title title' 'photo comments';
  grid-gap: 10px;
  padding: 10px;
}

.Title {
  background-color: rgb(47, 0, 99);
  width: 100%;
  grid-area: title;
  color: white;
}

.Photo {
  grid-area: photo;
}

.Comments {
  background-color: rgb(11, 75, 82);
  grid-area: comments;
  color: white
}

.post-container img {
  width: 100%;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title></title>
  <link rel="stylesheet" href="style.css" type="text/css">
</head>

<body>
  <div class="post-container">
    <div class="Title">
      <h1>comment Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cur post Tarentum ad Archytam? Idem iste, inquam, de voluptate quid sentit? </h1>
    </div>
    <div class="Photo">
      <img src="https://images.pexels.com/photos/1210543/pexels-photo-1210543.jpeg?cs=srgb&dl=architecture-bay-blue-1210543.jpg&fm=jpg" alt="">
    </div>
    <div class="Comments">
      <ul>
        <li>comment comment Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cur post Tarentum ad Archytam? Idem iste, inquam, de voluptate quid sentit?</li>
        <li>comment comment Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cur post Tarentum ad Archytam? Idem iste, inquam, de voluptate quid sentit?</li>
        <li>comment comment Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cur post Tarentum ad Archytam? Idem iste, inquam, de voluptate quid sentit?</li>
        <li>comment comment Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cur post Tarentum ad Archytam? Idem iste, inquam, de voluptate quid sentit?</li>
      </ul>
    </div>
  </div>
</body>

</html>

Solution

  • If you want the image to set the row's height, the other content(ul) needs to be taken of the flow via position:absolute;.

    You need also to set the width of this area via a template grid-template-colums.

    Once this area(.Comments) has a width(from template) and an height(from img), set it in position:relative; and size the ul via coordonates. Overflow will come next.

    demo below of the idea to avoid ul to resize your grid

    .post-container {
  background-color: rgb(0, 224, 255);
  display: grid;
  grid-template-columns: 50% 50%;
  grid-template-areas: 'title title' 'photo comments';
  grid-gap: 10px;
  padding: 10px;
}

.Title {
  background-color: rgb(47, 0, 99);
  width: 100%;
  grid-area: title;
  color: white;
}

.Photo {
  grid-area: photo;
}

.Photo img {
  vertical-align: top;
}

.Comments {
  background-color: rgb(11, 75, 82);
  grid-area: comments;
  color: white;
  position: relative;
}

.Comments ul {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  overflow: auto;
}

.post-container img {
  width: 100%;
}
    <!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title></title>
  <link rel="stylesheet" href="style.css" type="text/css">
</head>

<body>
  <div class="post-container">
    <div class="Title">
      <h1>comment Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cur post Tarentum ad Archytam? Idem iste, inquam, de voluptate quid sentit? </h1>
    </div>
    <div class="Photo">
      <img src="https://images.pexels.com/photos/1210543/pexels-photo-1210543.jpeg?cs=srgb&dl=architecture-bay-blue-1210543.jpg&fm=jpg" alt="">
    </div>
    <div class="Comments">
      <ul>
        <li>comment comment Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cur post Tarentum ad Archytam? Idem iste, inquam, de voluptate quid sentit?</li>
        <li>comment comment Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cur post Tarentum ad Archytam? Idem iste, inquam, de voluptate quid sentit?</li>
        <li>comment comment Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cur post Tarentum ad Archytam? Idem iste, inquam, de voluptate quid sentit?</li>
        <li>comment comment Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cur post Tarentum ad Archytam? Idem iste, inquam, de voluptate quid sentit?</li>
      </ul>
    </div>
  </div>
</body>

</html>