How can I get my layout boxes to wrap responsively?-CodePudding

I am currently studying HTML, CSS, and JS on Coursera. I have been given the assignment to reproduce a responsive webpage using very simple HTML and CSS without using frameworks, grid, flex, and JS. I have mostly finished coding the page, but now I am stuck with two problems that, I believe, are connected to margins and viewport. The page should respond to the size of the screen like that:

Desktop: the three boxes should each take a third of the page horizontally
Tablet: the first two boxes should take the half of the screen and the third should take 100% of the next line
Mobile: the three boxes should stack

I can recreate the Desktop and Mobile view but not the Tablet. In my Tablet view, the third covers the first two. I am using media queries for that. I have attached my HTML and CSS code.

And the other problem has something to do with margins. I need to apply even spacing between the boxes. However, when I use margins in Desktop view, the third box drops on the next line. So, I have omitted them. Here is a link to the task on GitHub https://github.com/jhu-ep-coursera/fullstack-course4/blob/master/assignments/assignment2/Assignment-2.md in case my explanation is not clear.

Thanks in advance. I am a noob but I want to learn and improve.

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  background-color: #ffb3ff;
}

body {
  font-family: "Truculenta", "Arial", sans-serif;
}

h1 {
  padding: 15px 0 15px 0;
  text-align: center;
  font-size: 1.75em;
}

.container {
  width: 100%;
  height: auto;
}

.box {
  background: #ffffe6;
  border: 1px solid black;
  position: relative;
  height: auto;
  margin-bottom: 10px;
}

p {
  padding: 40px 10px 4px 10px;
  text-align: justify;
}

h3 {
  text-align: center;
}

.label {
  border: 1px solid black;
  font-size: 1.25em;
  position: absolute;
  top: 0;
  right: 0;
  width: 100px;
}

#label1 {
  background: #73e600;
}

#label2 {
  background: #ff0055;
}

#label3 {
  background: #00bfff;
}


/* Desktop */

@media (min-width: 992px) and (max-width: 2560px) {
  .box {
    width: 33.33%;
    float: left;
  }
}


/* Tablet */

@media (min-width: 768px) and (max-width: 991px) {
  div#box1.box {
    width: 50%;
    float: left;
  }
  div#box2.box {
    width: 50%;
    float: left;
  }
  div#box3.box {
    width: 100%;
  }
}


/* Mobile */

@media (min-width: 320px) and (max-width: 767px) {
  .box {
    width: 100%;
  }
}

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Coursera Module 2 Assignment - Restaurant Menu</title>
  <link href="https://fonts.googleapis.com/css2?family=Truculenta" rel="stylesheet">
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <h1>Our Menu</h1>
  <div >
    <div id="box1" >
      <div >
        <h3 id="label1">Chicken</h3>
      </div>
      <p>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.
      </p>
    </div>

    <div id="box2" >
      <div >
        <h3 id="label2">Beef</h3>
      </div>
      <p>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.
      </p>
    </div>

    <div id="box3" >
      <div >
        <h3 id="label3">Sushi</h3>
      </div>
      <p>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.
      </p>
    </div>

  </div>
</body>

CodePudding user response：

We can make your code work with two things:

Convert all instances of float to inline-block display
Remove whitespace between the three .box elements in the markup

However, I'd look at using flexbox or grid for a modern solution.

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  background-color: #ffb3ff;
}

body {
  font-family: "Truculenta", "Arial", sans-serif;
}

h1 {
  padding: 15px 0 15px 0;
  text-align: center;
  font-size: 1.75em;
}

.container {
  width: 100%;
  height: auto;
}

.box {
  display: inline-block;
  background: #ffffe6;
  border: 1px solid black;
  position: relative;
  height: auto;
  margin-bottom: 10px;
}

p {
  padding: 40px 10px 4px 10px;
  text-align: justify;
}

h3 {
  text-align: center;
}

.label {
  border: 1px solid black;
  font-size: 1.25em;
  position: absolute;
  top: 0;
  right: 0;
  width: 100px;
}

#label1 {
  background: #73e600;
}

#label2 {
  background: #ff0055;
}

#label3 {
  background: #00bfff;
}


/* Desktop */

@media (min-width: 992px) and (max-width: 2560px) {
  .box {
    width: 33.33%;
  }
}


/* Tablet */

@media (min-width: 768px) and (max-width: 991px) {
  div#box1.box {
    width: 50%;
  }
  div#box2.box {
    width: 50%;
  }
  div#box3.box {
    width: 100%;
  }
}


/* Mobile */

@media (min-width: 320px) and (max-width: 767px) {
  .box {
    width: 100%;
  }
}

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Coursera Module 2 Assignment - Restaurant Menu</title>
  <link href="https://fonts.googleapis.com/css2?family=Truculenta" rel="stylesheet">
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <h1>Our Menu</h1>
  <div >
    <div id="box1" >
      <div >
        <h3 id="label1">Chicken</h3>
      </div>
      <p>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.
      </p>
    </div><div id="box2" >
      <div >
        <h3 id="label2">Beef</h3>
      </div>
      <p>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.
      </p>
    </div><div id="box3" >
      <div >
        <h3 id="label3">Sushi</h3>
      </div>
      <p>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.
      </p>
    </div>

  </div>
</body>