How do I make two divs be next to eachother-CodePudding

How do I make the div with id="middle" be on the left and the div with id="right" be on the right?

.divStyle {
  margin-left: 252.5px;
  margin-top: 5px;
  margin-right: 252.5px;
  padding-right: 10px;
  padding-left: 10px;
  background-color: white;
  border: 2px solid #4CAF50;
  border-radius: 5px;
}

.center {
  text-align: center;
}

.hidden {
  display: none;
}

.button-arangementR {
  display: flex;
  height: 100px;
  justify-content: right;
  gap: 20px;
}

<div class="divStyle" style="float:left;" id="middle">
  <div>
    <h1 style="color: darkblue;">The Initial Climb</h1>
  </div>
  <div>
    <div>
      <h3>The starting point is (25,5). The peak of the climb is (75,105).</h3>
    </div>
    <div>
      <br>
      <p>m = change in y/ change in x</p>
      <br>
      <p>m = 5-105/25-75</p>
      <br>
      <p>m = -100/-50 = 100/50</p>
      <br>
      <p>m = 2</p>
      <br>
    </div>
    <div>
      <h3>You can reduce the slop to m = 2. Since the increments are the same on the x and y axes, you can simply coun the units.</h3>
    </div>
  </div>
</div>
<div class="hidden divStyle">
  <div>
    <h1 style="color: darkblue;">Initial Climb Equation</h1>
  </div>
  <div>
    <p>y = mx   b</p>
  </div>
  <div>
    <h2 style="color: red;">y = 2x - 45</h2>
  </div>
  <div>
    <p>This is slope intercept form. I had to calculate where my initial climb would have crossed the y-intercept.</p>
  </div>
</div>
<div class="button-arangementR" style="float:left;">
  <button id="right">NEXT</button>
</div>

CodePudding user response：

display: flex; implementation.

Your margin values are pulling the content outside the row. You need to control them aswell.

.divStyle {
  /* margin-left: 252.5px;
  margin-top: 5px;
  margin-right: 252.5px; */
  padding-right: 10px;
  padding-left: 10px;
  background-color: white;
  border: 2px solid #4CAF50;
  border-radius: 5px;
  margin: 0 auto;
}

.center {
  text-align: center;
}

.hidden {
  display: none;
}

.button-arangementR {
  display: flex;
  height: 100px;
  justify-content: right;
  gap: 20px;
}

.container {
  display: flex;
  flex-direction: row;
}

<div class="container">
  <div class="divStyle" id="middle">
    <div>
      <h1 style="color: darkblue;">The Initial Climb</h1>
    </div>
    <div>
      <div>
        <h3>The starting point is (25,5). The peak of the climb is (75,105).</h3>
      </div>
      <div>
        <br>
        <p>m = change in y/ change in x</p>
        <br>
        <p>m = 5-105/25-75</p>
        <br>
        <p>m = -100/-50 = 100/50</p>
        <br>
        <p>m = 2</p>
        <br>
      </div>
      <div>
        <h3>You can reduce the slop to m = 2. Since the increments are the same on the x and y axes, you can simply
          coun
          the units.</h3>
      </div>
    </div>
  </div>
  <div class="hidden divStyle">
    <div>
      <h1 style="color: darkblue;">Initial Climb Equation</h1>
    </div>
    <div>
      <p>y = mx   b</p>
    </div>
    <div>
      <h2 style="color: red;">y = 2x - 45</h2>
    </div>
    <div>
      <p>This is slope intercept form. I had to calculate where my initial climb would have crossed the y-intercept.
      </p>
    </div>
  </div>
  <div class="button-arangementR">
    <button id="right">NEXT</button>
  </div>
</div>

CodePudding user response：

You Can Create a Div to overall for two div and style it display inline-flex and style the div left to float left and right to float right.

.overall{
display: inline-block;
}
.left{
float: left;
width: 50%;
margin: auto;
background-color: blue;
}
.right{
float: right;
width: 50%;
margin: auto;
background-color: green;
}

<div class="overall">
<div class="left">
<h1>Left</h1>
</div>
<div class="left">
<h1>Right</h1>
</div>
</div>