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

Html – div boxes are uneven , some are short and some are big

output I am creating a menu page with three containers: chicken, beef, and sushi. However, after writing the CSS code, the boxes appear uneven. Here is my CSS code:

* {
    box-sizing: border-box;
}

body {
    background-color: white;
}

h1 {
    text-align: center;
    font-family: cursive;
}

div{
    border: 1px solid black;
    width: 300px;
    float: left;
    margin: 20px;
}

I need help figuring out why the containers are uneven and how to fix it.

Tags:

2

Answers


  1. 0

    You have two options:

    • To set fixed height and overflow: scroll for div selector, like this:
    div{
    border: 1px solid black;
    width: 300px;
    height: 300px;
    overflow: scroll;
    float: left;
    margin: 20px;
}

    This is simple with no too much modifications to your code. The boxes has the same height (300px), but if contents of one div do not fit in this height they are hidden and can be viewed by scrolling.

    • A better and more powerfull way, is to use flexbox. You can make a flexbox container and wrap the divs inside, like this:
    .flexbox
{
    display: flex;
}

.box{
    border: 1px solid black;
    width: 300px;
    margin: 20px;
}

    <div class="flexbox">
    <div class="box">
    ...
    </div>
    <div class="box">
    ...
    </div>
    <div class="box">
    ...
    </div>
</div>

    Note that we removed float: left. Also note that it is better to use class selectors instead of element selectors (note replacment of div { with .box {), avoid element selectors as possible.

    Login or Signup to reply.
  2. 0

    Why not use float?

    The use of the float: left property was popular in the past for website layout, but it is now considered a less recommended method. The use of float often causes problems in modern web design. Therefore, it is recommended to choose other methods such as CSS flexbox or CSS grid. These provide much more options and compatibility in layout design.

    Flex

    With the display: flex property, child elements can be arranged in one row or one column. In this case, they achieve equal height regardless of scrolling. It is a better solution than a fixed height, such as 300px, because when applying short texts, the scroll bar will never appear, yet they will still have the same height.

    If we want to compare flex to grid, perhaps the most straightforward way to do it is by saying that flex is a single-column or single-row grid table.

    Grid

    With the display: grid setting, we essentially get a table built from a specified number of columns or rows, with uniform height and width. This is commonly used, for example, in displaying image galleries or file managers.

    Solution (with flex)

    * {
  box-sizing: border-box;
}

body {
  background-color: white;
}

h1 {
  text-align: center;
  font-family: cursive;
}

/* container */
.container {
  display: flex; /* you were looking for this setting with your question */
  gap: 20px; /* margin between elements */
}

/* elements */
.container .element {
  border: 1px solid #000;
  border-radius: 10px;
  padding: 10px 5px;
}

/* title */
.container .element .title {
  font-weight: bold;
}
    <h1>Our Menu</h1>

<!-- Container -->
<div class="container">
  <div class="element">
    <!-- First -->
    <p class="title">Chicken</p>
    <p class="content">The country that consumes the greatest amount of chicken is the United States. Every year, the United States consumes approximately 15,000 metric tons of chicken, placing it significantly in front of the second-place region. The United States adds chicken to just about everything.
  </div>
  <!-- Second -->
  <div class="element">
    <p class="title">Beef</p>
    <p class="content">Beef is the culinary name for meat from cattle. In prehistoric times, humankind hunted aurochs and later domesticated them. Since that time, numerous breeds of cattle have been bred specifically for the quality or quantity of their meat.
  </div>
  <!-- Third -->
  <div class="element">
    <p class="title">Sushi</p>
    <p class="content">Sushi is a Japanese dish of prepared vinegared rice, ususally with some sugar and salt accompanied by a variety of ingredients, such as seafood - oftern raw - and vegetables. Styles of sushi and its presentation vary widely, but the one key ingredient is "sushi rice", also referred to as shari, or sumeshi.
  </div>
</div>

    More information

    CSS – display: flex – MDN
    CSS – display: grid – MDN

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

Back To Top
Search