Hello css help needed thanks

HTML-CSS
1

Hi if i make my two flex containers width 25% and 75 % respectively they wont stay on the same line, can someone help, thanks

css

body {
  box-sizing: border-box;
  display: flex;
  background-color: azure;
  height: 100vh;
  justify-content: center;
  align-items: center;
}

.calculator {
  width: 60%;
  min-width: 600px;
  height: 600px;
  background-color: grey;
}

#display {
  width: 100%;
  height: 20%;
  background-color: black;
  /* border-radius: 5px 5px 0 0; */
}

.button {
  flex-basis: 20%;
  height: 20%;
  margin: 1px;
  border: 1px solid black;
}

.numbers {
  width: 75%;
  height: 80%;
  background-color: indigo;
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: space-between;
  vertical-align: top;
}

.equal {
  width: 25%;
  height: 80%;
  background-color: red;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  vertical-align: top;
  color: white;
}

html

    <div class="calculator">
      <div id="display"></div>
      <div class="numbers">
        <div class="button"></div>
        <div class="button"></div>
        <div class="button"></div>
        <div class="button"></div>
        <div class="button"></div>
        <div class="button"></div>
        <div class="button"></div>
        <div class="button"></div>
        <div class="button"></div>
        <div class="button"></div>
        <div class="button"></div>
        <div class="button"></div>
        <div class="button"></div>
        <div class="button"></div>
        <div class="button"></div>
        <div class="button"></div>
      </div>
      <div class="equal">=</div>
    </div>

Thanks in advance!

2

Hey @footballblubber!

Try flex-direction: row . But from what I see you have 3 containers, not 2, in your main div. #display, .numbers and .equal.

3

If you want your divs to sit next to each other, you’ll have to set the parent container to display:flex. To make it work with your mark-up, you’ll need

.calculator  {
    display:flex;
    flex-wrap:wrap
}

flex-wrap will make sure that your .numbers and .equal divs are on the same line, and below the .display div.

4

Thanks Casper that worked!

1 Like