online div not side by side

Question

I have this code below. I have one container div with 2 inner div. I want the two inner divs to be side by side so I used in-line block on the two divs. Also I want the two divs to be start on top. In the demo below they are stuck on top and I dont know why while in my own project they are side by side but first div starts on top while second div does not start on top.

What is the best css style to make the 2 div in a container start on top while it is side by side?

What is the best way to make two div side by side?

.homissync {
  display: block;
  height: 100%;
}

.homissync>div {
  padding: 27px;
  margin: 3px;
  display: inline-block;
}

#homissyncbuttons {
  height: 100vh;
  width: 20%;
  margin: 3px;
}

#homissynclist {
  height: 100vh;
  margin: 3px;
  width: 68%;
}

#homissyncbuttons .libuttons {
  width: 100% !important;
  background-color: #ff0000;
}

.vBorder {
    border: solid 1px #ddd;
}

button, input[type=submit] {
    padding: 8px 20px;
    color: #fff;
    text-shadow: 0 0 2px rgba(0,0,0,0.35);
    background-color: orange;
    font-size: 0.9rem;
    font-weight: bold;
    border-radius: 3px;
    border: 0;
    outline: none !important;
    margin: 3px 0;
    cursor: pointer;
    transition: background 1s ease-in-out;
}

<div class=" homissync">
  <div id="homissyncbuttons" class=" vBorder">
    <ul>
      <li>
        <button class="libuttons">UACS</button>
      </li>
      <li>
        <button class="libuttons">Medicine</button>
      </li>
      <li>
        <button class="libuttons">Non-Drugs</button>
      </li>
      <li>
        <button class="libuttons">Miscellaneous</button>
      </li>
    </ul>



  </div>
  <div id="homissynclist" class=" vBorder">
    <button class="listbuttons" id="new_uacs_entry">New UACS Entry</button>
    <button class="listbuttons" id="update_uacs_entry">Update UACS Entry</button>
    <div id="homissynclistresult" class=" vPadding vBorder">



    </div>

  </div>

</div>

score 1 · Accepted Answer · answered Jul 26 '17 at 05:03

1

Please try this code instead of the display:inline-block; and just add float:left.

.homissync>div {
    display: block;
    float: left;
}

answered Jul 26 '17 at 05:03

Emipro Technologies Pvt. Ltd.

14,598
5
45
75

please explain a bit more why it didnt work and why this work? – Martin Jul 26 '17 at 05:12
One thing is size of the div and all div tag is appearing into the new line so for that we need to used float to display both things in same line. – Emipro Technologies Pvt. Ltd. Jul 26 '17 at 05:15
And more reason is : A typical characteristic of inline elements is that they respect the whitespace in the markup. Please check this link https://stackoverflow.com/questions/19038799/why-is-there-an-unexplainable-gap-between-these-inline-block-div-elements – Emipro Technologies Pvt. Ltd. Jul 26 '17 at 05:28
ty happy coding – Martin Jul 26 '17 at 05:29

score 0 · Answer 2 · answered Jul 26 '17 at 05:06

you can use float: left; instead of display: inline-block;

.homissync {
  display: block;
  height: 100%;
}

.homissync>div {
  padding: 27px;
  margin: 3px;
  float:left;
}

#homissyncbuttons {
  height: 100vh;
  width: 20%;
  margin: 3px;
}

#homissynclist {
  height: 100vh;
  margin: 3px;
  width: 65%;
}

#homissyncbuttons .libuttons {
  width: 100% !important;
  background-color: #ff0000;
}

.vBorder {
    border: solid 1px #ddd;
}

button, input[type=submit] {
    padding: 8px 20px;
    color: #fff;
    text-shadow: 0 0 2px rgba(0,0,0,0.35);
    background-color: orange;
    font-size: 0.9rem;
    font-weight: bold;
    border-radius: 3px;
    border: 0;
    outline: none !important;
    margin: 3px 0;
    cursor: pointer;
    transition: background 1s ease-in-out;
}

<div class=" homissync">
  <div id="homissyncbuttons" class=" vBorder">
    <ul>
      <li>
        <button class="libuttons">UACS</button>
      </li>
      <li>
        <button class="libuttons">Medicine</button>
      </li>
      <li>
        <button class="libuttons">Non-Drugs</button>
      </li>
      <li>
        <button class="libuttons">Miscellaneous</button>
      </li>
    </ul>



  </div>
  <div id="homissynclist" class=" vBorder">
    <button class="listbuttons" id="new_uacs_entry">New UACS Entry</button>
    <button class="listbuttons" id="update_uacs_entry">Update UACS Entry</button>
    <div id="homissynclistresult" class=" vPadding vBorder">



    </div>

  </div>

</div>

score 0 · Answer 3 · answered Jul 26 '17 at 05:13

display:inline-block have default white space, you need to remove the white space. otherwise you need to relace the display-inline-block with float:left , there is so many options to remove the white space please check the reference link below

Why is there an unexplainable gap between these inline-block div elements?

online div not side by side

3 Answers3