-1

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.

Dhruv Pandey
  • 1
  • 1
  • Because you have not set the same height for them. Thus they are only as tall as they need to be. – Paulie_D Jun 17 '23 at 06:02
  • Without seeing the HTML it's a little vague but wrap the three divs in a container and apply display flex. Float is a very old method of layout and it's not often used any more. Www.learnlayout.com – Paulie_D Jun 17 '23 at 06:05
  • Thanks a lot for answering such a silly question!! @Paulie_D – Dhruv Pandey Jun 17 '23 at 06:05

1 Answers1

-1

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.

Moha4Mach
  • 1
  • 3