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

CSS. Making an HTML for an About Me. Where the alternating div sections inside another div are different sizes where it should be same sizes

I have a layout where I’m displaying information about multiple persons using HTML and CSS. Each person’s information is contained within a <div> element with a class like about-me-1, about-me-2, and so on which are also within another <div>. I think the problem is with the float value.

Design:
Design

Result:
Result

Code:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title></title>
  <style type="text/css">
    body{
      background-color: white;
    }
    .about-me-background{
      background-color: #320f6f;
      margin-left: 50px;
      margin-right: 50px;
      padding: 30px;
      border-radius: 20px;
    }
    .about-me-1 {
      width: 80%;
      margin-left: auto;
      margin-right: auto;
      margin-bottom: 32px;
      background-color: #242424;
      color: white;
      border-radius: 50px;
    }

    .about-me-2 {
      width: 80%;
      margin-left: auto;
      margin-right: auto;
      margin-bottom: 32px;
      background-color: #f8f8f8;
      color: black;
      border-radius: 50px;
    }

    .about-me-3 {
      width: 80%;
      margin-left: auto;
      margin-right: auto;
      margin-bottom: 2rem;
      background-color: #242424;
      color: white;
      border-radius: 50px;
    }

    .about-me-4 {
      width: 80%;
      margin-left: auto;
      margin-right: auto;
      margin-bottom: 32px;
      background-color: #f8f8f8;
      color: black;
      border-radius: 50px;
    }

    .about-me-5 {
      width: 80%;
      margin-left: auto;
      margin-right: auto;
      margin-bottom: 32px;
      background-color: #242424;
      color: white;
      border-radius: 50px;
    }
    .description-box{
      overflow: hidden
      margin: 30px;
    }
    .picture-frame-odd{
      height: 300px;
      width: 30%;
      float: right;
      margin-right: -130px;
      margin-top: 8px;
    }
    .picture-frame-even{
      height: 300px;
      width: 30%;
      float: left;
      margin-left: 30px;
      margin-top: 8px;
    }
    .picture{
      width: 130px;
      height: 130px;
      border-radius:50%;
   }
  </style>
</head>
<body>
  <div class="about-me-background">
  <!-- Person 1 -->
  <div class="about-me-1">
    <div class="picture-frame-odd">
      <img class="picture" src="Images/person1.jpg" alt="Person 1">
    </div>
    <div class="description-box">
      <h2 class="name">Person 1</h2>
      <p class="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
      cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
      proident, sunt in culpa qui officia deserunt mollit anim id est laborum. ipsum dolor sit amet, consectetur adipiscing elit. Quisque eget ligula vitae nisi tincidunt dapibus.</p>
    </div>
  </div>

  <!-- Person 2 -->
  <div class="about-me-2">
    <div class="picture-frame-even">
      <img class="picture" src="Images/person2.jpg" alt="Person 2">
    </div>
    <div class="description-box">
      <h2 class="name">Person 2</h2>
      <p class="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
      cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
      proident, sunt in culpa qui officia deserunt mollit anim id est laborum. ipsum dolor sit amet, consectetur adipiscing elit. Quisque eget ligula vitae nisi tincidunt dapibus.</p>
    </div>
  </div>

  <!-- Person 3 -->
  <div class="about-me-3">
    <div class="picture-frame-odd">
      <img class="picture" src="person3.jpg" alt="Person 3">
    </div>
    <div class="description-box">
      <h2 class="name">Name 3</h2>
      <p class="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
      cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
      proident, sunt in culpa qui officia deserunt mollit anim id est laborum. ipsum dolor sit amet, consectetur adipiscing elit. Quisque eget ligula vitae nisi tincidunt dapibus.</p>
    </div>
  </div>
    
  <!-- Person 4 -->
  <div class="about-me-4">
    <div class="picture-frame-even">
      <img class="picture" src="person4.jpg" alt="Person 4">
    </div>
    <div class="description-box">
      <h2 class="name">Name 4</h2>
      <p class="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
      cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
      proident, sunt in culpa qui officia deserunt mollit anim id est laborum. ipsum dolor sit amet, consectetur adipiscing elit. Quisque eget ligula vitae nisi tincidunt dapibus.</p>
    </div>
  </div>

  <!-- Person 5 -->
  <div class="about-me-5">
    <div class="picture-frame-odd">
      <img class="picture" src="person5.jpg" alt="Person 5">
    </div>
    <div class="description-box">
      <h2 class="name">Name 5</h2>
      <p class="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
      cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
      proident, sunt in culpa qui officia deserunt mollit anim id est laborum. ipsum dolor sit amet, consectetur adipiscing elit. Quisque eget ligula vitae nisi tincidunt dapibus.</p>
    </div>
  </div>
  </div>
</body>
</html>

I was expecting the individual div sections to be the same size. I tried having a fixed height and it still didn’t work.

Tags:

2

Answers


  1. 0

    Maybe try using min-width and min-height, also to make sure it stays in corners after you use boarder radius use margin/padding appropriately.

    Let me know if this is to broad and I can get more specific.

    Login or Signup to reply.
  2. 0

    I was expecting the individual div sections to be the same size. I tried having a fixed height and it still didn’t work.

    I don’t know what you mean by " fixed height didn’t work".

    By default html elements size and height will expand based on their content.
    If you want all of you div.about-me elements to have the same height regardless of their content, you should set a fixed height.

    Check out below code, even though div.about-me-4 has much longer text, its height is the same as others.

    <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title></title>
    <style type="text/css">
      body {
        background-color: white;
      }
      .about-me-background {
        background-color: #320f6f;
        margin-left: 50px;
        margin-right: 50px;
        padding: 30px;
        border-radius: 20px;
      }

      .about-me {
        width: 80%;
        height: 10rem;
        overflow: hidden;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 32px;
        border-radius: 50px;
      }

      .about-me:nth-child(odd) {
        background-color: #242424;
        color: white;
      }
      .about-me:nth-child(even) {
        background-color: #f8f8f8;
        color: black;
      }

      .description-box {
        overflow: hidden;
        margin: 30px;
      }

      .picture-frame {
        height: 300px;
        width: 30%;
        margin-top: 8px;
      }
      .picture-frame:nth-child(odd) {
        float: right;
        margin-right: -130px;
      }
      .picture-frame:nth-child(even) {
        float: left;
        margin-left: 30px;
      }
      .picture {
        width: 130px;
        height: 130px;
        border-radius: 50%;
      }
    </style>
  </head>
  <body>
    <div class="about-me-background">
      <!-- Person 1 -->
      <div class="about-me about-me-1">
        <div class="picture-frame picture-frame-odd">
          <img class="picture" src="Images/person1.jpg" alt="Person 1" />
        </div>
        <div class="description-box">
          <h2 class="name">Person 1</h2>
          <p class="description">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
            aliquip ex ea commodo consequat. Duis aute irure dolor in
            reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
            pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
            culpa qui officia deserunt mollit anim id est laborum. ipsum dolor
            sit amet, consectetur adipiscing elit. Quisque eget ligula vitae
            nisi tincidunt dapibus.
          </p>
        </div>
      </div>

      <!-- Person 2 -->
      <div class="about-me about-me-2">
        <div class="picture-frame picture-frame-even">
          <img class="picture" src="Images/person2.jpg" alt="Person 2" />
        </div>
        <div class="description-box">
          <h2 class="name">Person 2</h2>
          <p class="description">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
            aliquip ex ea commodo consequat. Duis aute irure dolor in
            reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
            pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
            culpa qui officia deserunt mollit anim id est laborum. ipsum dolor
            sit amet, consectetur adipiscing elit. Quisque eget ligula vitae
            nisi tincidunt dapibus.
          </p>
        </div>
      </div>

      <!-- Person 3 -->
      <div class="about-me about-me-3">
        <div class="picture-frame picture-frame-odd">
          <img class="picture" src="person3.jpg" alt="Person 3" />
        </div>
        <div class="description-box">
          <h2 class="name">Name 3</h2>
          <p class="description">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
            aliquip ex ea commodo consequat. Duis aute irure dolor in
            reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
            pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
            culpa qui officia deserunt mollit anim id est laborum. ipsum dolor
            sit amet, consectetur adipiscing elit. Quisque eget ligula vitae
            nisi tincidunt dapibus.
          </p>
        </div>
      </div>

      <!-- Person 4 -->
      <div class="about-me about-me-4">
        <div class="picture-frame picture-frame-even">
          <img class="picture" src="person4.jpg" alt="Person 4" />
        </div>
        <div class="description-box">
          <h2 class="name">Name 4</h2>
          <p class="description">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
            aliquip ex ea commod Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
            aliquip ex ea commodo consequat. Duis aute irure dolor in
            reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
            pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
            culpa qui officia deserunt mollit anim id est laborum. ipsum dolor
            sit amet, consectetur adipiscing elit. Quisque eget ligula vitae
            nisi tincidunt dapibus. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
            aliquip ex ea commodo consequat. Duis aute irure dolor in
            reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
            pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
            culpa qui officia deserunt mollit anim id est laborum. ipsum dolor
            sit amet, consectetur adipiscing elit. Quisque eget ligula vitae
            nisi tincidunt dapibus. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
            aliquip ex ea commodo consequat. Duis aute irure dolor in
            reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
            pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
            culpa qui officia deserunt mollit anim id est laborum. ipsum dolor
            sit amet, consectetur adipiscing elit. Quisque eget ligula vitae
            nisi tincidunt dapibus.o consequat. Duis aute irure dolor in
            reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
            pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
            culpa qui officia deserunt mollit anim id est laborum. ipsum dolor
            sit amet, consectetur adipiscing elit. Quisque eget ligula vitae
            nisi tincidunt dapibus.
          </p>
        </div>
      </div>

      <!-- Person 5 -->
      <div class="about-me about-me-5">
        <div class="picture-frame picture-frame-odd">
          <img class="picture" src="person5.jpg" alt="Person 5" />
        </div>
        <div class="description-box">
          <h2 class="name">Name 5</h2>
          <p class="description">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
            aliquip ex ea commodo consequat. Duis aute irure dolor in
            reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
            pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
            culpa qui officia deserunt mollit anim id est laborum. ipsum dolor
            sit amet, consectetur adipiscing elit. Quisque eget ligula vitae
            nisi tincidunt dapibus.
          </p>
        </div>
      </div>
    </div>
  </body>
</html>

    TIP:

    You should combine similar properties in one class and use that class for you elements, rather than repeating the same styles/properties with different classes names.

    As for alternative styling you can use :nth-child(even) and :nth-child(odd) psuedo-selectors. ref1, ref2

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search