Trouble with placing the divs in one row

Question

I want to align these 3 divs next to each other, but instead of setting px or % as per the window I would like it to be as auto (is this possible?). Also in case the browser is narrower, the 3rd div should go below and occupy entire row, but somehow it does not do that. Media conditions are being set however.

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

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

h1 {
  text-align: center;
  padding: 15px;
}

h3 {
  border: 1px solid black;
  margin: 1px;
  font-weight: bold;
  float: right;
}

p {
  box-sizing: border-box;
  margin-top: 35px;
  margin-left: 10px;
  margin-right: 10px;
  margin-bottom: 10px;
  white-space: normal;
  overflow: overlay;
}

title {
  float: left;
  position: absolute;
  clear: both;
}

container {
  width: 100%;
  margin: 10px;
}

.section {
  float: left;
  margin: 5px;
  border: 1px solid black;
  overflow: overlay;
}

.section:nth-child(1) {
  background-color: aquamarine;
}

.section:nth-child(2) {
  background-color: cadetblue;
}

.section:nth-child(3) {
  background-color: forestgreen;
}


/* Large devices */

@media (min-width: 992px) {
  .col-lg-4 {
    float: left;
    width: 33%;
  }
}


/* Medium devices */

@media (min-width: 768px) and (max-width: 991px) {
  .col-md-6 {
    float: left;
    width: 50%;
  }
  .col-md-12 {
    clear: both;
  }
}


/* Small devices */

@media max-width: 767px {
  .col-sm-12 {
    width: 100%;
  }
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="css/styles.css">
  <title>Module 2 Assignment</title>
</head>

<body>
  <header>
    <h1>Our Menu</h1>
  </header>
  <div class="container">
    <div class="section col-lg-4 col-md-6 col-sm-12">
      <h3 id="item1" class="title">Menu Item 1</h3>
      <p>Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text
        Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here </p>
    </div>
    <div class="section col-lg-4 col-md-6 col-sm-12">
      <h3 id="item2" class="title">Menu Item 2</h3>
      <p>Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text
        Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here </p>
    </div>
    <div class="section col-lg-4 col-md-12 col-sm-12">
      <h3 id="item3" class="title">Menu Item 3</h3>
      <p>Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text
        Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here </p>
    </div>
  </div>
</body>

</html>

Can you use [Flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox)? It would significantly simplify the process. — Jacob Lockard, Apr 13 '20 at 13:19

score 0 · Answer 1 · answered Apr 13 '20 at 13:27

0

change your CSS to this

.col-lg-4 {
    float: left;
    width: 32.80%;
}

if you want you can use flexbox for example like this

.container{
display:flex;
}

answered Apr 13 '20 at 13:27

Rahul

33
6

score 0 · Answer 2 · answered Apr 13 '20 at 13:30

The problem is with your section css.

It's prepared to use the full with and it has 5px margin, if you set it to padding you'll see that it occupies the width you expect.

It's like having width 100% and adding margin to it, the margin adds width and it does not fit in that space. Padding, otherwise, is part of the inside width of the element and does not have this issue.

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
body {
    font-family: "Arial", "Helvetica", sans-serif;
}
h1 {
    text-align: center;
    padding: 15px;
}
h3 {
    border: 1px solid black;
    margin: 1px;
    font-weight: bold;
    float: right;
}
p {
    box-sizing: border-box;
    margin-top: 35px;
    margin-left: 10px;
    margin-right: 10px;
    margin-bottom: 10px;
    white-space: normal;
    overflow:overlay;
}
title {
    float: left;
    position: absolute;
    clear: both;
}
container {
    width: 100%;
    margin: 10px;
}

.section {
    float: left;
    padding: 5px;
    border: 1px solid black;
    overflow:overlay;
}

.section:nth-child(1) {
  background-color: aquamarine;
   
}

.section:nth-child(2)  {
    background-color: cadetblue;
   
}

.section:nth-child(3) {
   background-color: forestgreen;
}

/* Large devices */
@media (min-width: 992px) {
  .col-lg-4 {
    float: left;
    width: 33%;
  }
}

/* Medium devices */
@media (min-width: 768px) and (max-width: 991px) {
  .col-md-6 {
    float: left;
    width: 50%;
  }
  .col-md-12 {
    clear: both;
  }
}

/* Small devices */
@media max-width: 767px {
  .col-sm-12 {
    width: 100%;
  }
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/styles.css">
    <title>Module 2 Assignment</title>
</head>
<body>
    <header> <h1>Our Menu</h1></header>
    <div class="container">
    <div class="section col-lg-4 col-md-6 col-sm-12">
        <h3 id="item1" class="title">Menu Item 1</h3>
        <p>Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here </p>
    </div>
    <div class="section col-lg-4 col-md-6 col-sm-12">
        <h3 id="item2" class="title">Menu Item 2</h3>
        <p>Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here </p>
    </div>
    <div class="section col-lg-4 col-md-12 col-sm-12">
        <h3 id="item3" class="title">Menu Item 3</h3>
        <p>Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here Text Goes Here </p>
    </div>
    </div>
</body>
</html>

If you want to add a white margin outside then you can add another extra div inside section with the border, margin and colors that you want.

Trouble with placing the divs in one row

2 Answers2