How to arrange two division side by side in HTML

Question

How to arrange two division vertically Here is my division code

.containerLeft {
  width: 50%;
  float: left;
}

.containerRight {
  width: 50%;
  background-color: skyblue;
}

<div class="containerLeft">
  <input type="text" id="mytext" />
  <select id="myList" multiple="multiple"/>
      </div>
      <div class="containerRight">
          <input type="button" class="myButton"  value="A"></input>
          <input type="button" class="myButton"  value="B"></input>
          <input type="button" class="myButton"  value="C"></input>
      </div>

I would like to get the first div container above to share 50% of the screen and the second div container with the buttons share remaining 50% .both container should stand Side by side.

Any help is appreciated. Very new to HTML. so please let me know if it is not right approach to get two panels side by side.

First off, you need to close your select. And your first input is for some reason called: "but". Also, you are closing inputs with buttons. — Leon Freire, Sep 19 '17 at 15:50
Possible duplicate of [Align
elements side by side](https://stackoverflow.com/questions/4938716/align-div-elements-side-by-side) — chazsolo, Sep 19 '17 at 15:53

score 0 · Answer 1 · answered Sep 19 '17 at 15:51

0

if i've understood you this would be the solution:

.containerRight {
   float:left;
   width: 50%;
   background-color: skyblue;
}

answered Sep 19 '17 at 15:51

Daniel Gomez

26
4

Joseph Cho · Answer 2 · 2017-09-19T15:58:56.723

0

As others have mentioned there are a number of problems with your HTML. I've tried to fix them accordingly.

Your CSS is really close, all you need to add is float: left to the other div.

.containerLeft {
  background-color: red;
  float: left;
  width: 50%;
}

.containerRight {
  background-color: skyblue;
  float:left;
  width: 50%;
}

Working fiddle here: https://fiddle.jshell.net/a9t2ygsa/1/

edited Sep 19 '17 at 15:58

answered Sep 19 '17 at 15:53

Joseph Cho

4,033
4
26
33

score 0 · Answer 3 · answered Sep 19 '17 at 16:43

Notice my corrections in your HTML. I think you may be looking for something like this.

.containerLeft {
  width: 50%;
  height: 100vh;
  float: left;
}

.containerRight {
  width: 50%;
  height: 100vh;
  float: left;
  background-color: skyblue;
}

<div class="containerLeft">
  <input type="text" id="mytext" />
  <select id="myList" multiple="multiple"></select>
</div>
<div class="containerRight">
  <input type="button" class="myButton" value="A" />
  <input type="button" class="myButton" value="B" />
  <input type="button" class="myButton" value="C" />
</div>

How to arrange two division side by side in HTML

3 Answers3