Lay two divs on top of each other

Question

I am trying to position two divs next to each other. HTML

<div id="status">
  <div id ="wrapLeft">
    <input type="text" placeholder="username"/>
    <input type="password" placeholder="password"/>
  </div>
  <div id ="wrapRight">
    <input type="text" placeholder="url"/>
    <input type="text" placeholder="url"/>
  </div>
  <div id="clear"></div>
</div>

CSS

  body {
    font-family: "Segoe UI", "Lucida Grande", Tahoma, sans-serif;
    font-size: 100%;
  }      #status {
    /* avoid an excessively wide status text */
    white-space: pre;
    text-overflow: ellipsis;
    overflow: hidden;
    width: 600px
  }
  input{
    width:100px;
    height:25px;
    border-top:0px;
    border-left: 0px;
    border-right: 0px;
    outline: none;
  }
  #wrapLeft{
    position: relative;
    width: 30%;
    height: 100%;
    background: black;
    float: left
  }
  #wrapRight{
    position: relative;
    width: 65%;
    height: 100%;
    background: red;
    float: right;
  }
  #clear{
    clear:both;
  }

However, somehow divs arent on the same level, the right is lower than the left. How to fix it? I tried using left and right float, but it does not align, which should. What could be the reason for this? example

thanks for the help

Answer 1

Use display:flexfor basic div.

Also look at CSS, I removed some of the CSS.

body {
    font-family: "Segoe UI", "Lucida Grande", Tahoma, sans-serif;
    font-size: 100%;
  }      #status {
    /* avoid an excessively wide status text */
    white-space: pre;
    text-overflow: ellipsis;
    overflow: hidden;
  }
  
  #status{
  width:100%;
  display:flex;  /* It Important */ 
  }
  input{
    width:100px;
    height:25px;
    border-top:0px;
    border-left: 0px;
    border-right: 0px;
    outline: none;
  }
  #wrapLeft{
    width: 30%;
    height: 100%;
    background: black;

  }
  #wrapRight{
    width: 70%;
    height: 100%;
    background: red;
  }
 

<div id="status">
  <div id ="wrapLeft">
    <input type="text" placeholder="username"/>
    <input type="password" placeholder="password"/>
  </div>
  <div id ="wrapRight">
    <input type="text" placeholder="url"/>
    <input type="text" placeholder="url"/>
  </div>
  <div id="clear"></div>
</div>

Run codeHide result

Answer 2

For older browser support, you can use the CSS floatand width.

body {
    font-family: "Segoe UI", "Lucida Grande", Tahoma, sans-serif;
    font-size: 100%;
  }      #status {
    /* avoid an excessively wide status text */
    white-space: pre;

  }
  

  input{
    width:100px;
    height:25px;
    border-top:0px;
    border-left: 0px;
    border-right: 0px;
    outline: none;
  }
  #wrapLeft{
    float: left;
    width: 30%;
    background: black;
height: 100%;
  }
  #wrapRight{
    float: right;
  width: 70%;
    background: red;
    height: 100%;
    margin-top:-23px;  /* Important*/
  }

<div id="status">
  <div id ="wrapLeft">
    <input type="text" placeholder="username"/>
    <input type="password" placeholder="password"/>
  </div>
  <div id ="wrapRight">
    <input type="text" placeholder="url"/>
    <input type="text" placeholder="url"/>
  </div>
  <div id="clear"></div>
</div>

Run codeHide result

Answer 3

, : pre css. , div.

<style>

  body {
    font-family: "Segoe UI", "Lucida Grande", Tahoma, sans-serif;
    font-size: 100%;
  }      #status {

    text-overflow: ellipsis;
    overflow: hidden;
    width: 600px
  }
  input{
    width:100px;
    height:25px;
    border-top:0px;
    border-left: 0px;
    border-right: 0px;
    outline: none;
  }

  #wrapLeft{
    position: relative;
    width: 30%;
    height: 100%;
    background: black;
    float: left
  }
  #wrapRight{
    position: relative;
    width: 65%;
    height: 100%;
    background: red;
    float: right;
  }
  #clear{
    clear:both;
  }

  </style>

<div id="status">
  <div id ="wrapLeft">
    <input type="text" placeholder="username"/>
    <input type="password" placeholder="password"/>
  </div>
  <div id ="wrapRight">
    <input type="text" placeholder="url"/>
    <input type="text" placeholder="url"/>
  </div>
  <div id="clear"></div>
</div>

Answer 4

id css:

white-space: pre;

. : https://www.w3schools.com/cssref/pr_text_white-space.asp

Answer 5

white-space: pre .
wrapLeft wrapRight.

wrapRight, .

<div id="status">
  <div id ="wrapLeft">
    <input type="text" placeholder="username"/>
    <input type="password" placeholder="password"/>
  </div><div id ="wrapRight">
    <input type="text" placeholder="url"/>
    <input type="text" placeholder="url"/>
  </div>
  <div id="clear"></div>
</div>

Answer 6

, white-space: pre. html-. #status (, <p>), , text-overflow: ellipsis.

Answer 7

body {
    font-family: "Segoe UI", "Lucida Grande", Tahoma, sans-serif;
    font-size: 100%;
  }      #status {
    /* avoid an excessively wide status text */
    white-space: pre;
    text-overflow: ellipsis;
    overflow: hidden;
    width: 600px
  }
  input{
    width:100px;
    height:25px;
    border-top:0px;
    border-left: 0px;
    border-right: 0px;
    outline: none;
  }
  #wrapLeft,#wrapRight{
    display: inline-block;
  }
  #wrapLeft{
    position: relative;
    width: 30%;
    height: 100%;
    background: black;
  }
  #wrapRight{
    position: relative;
    width: 65%;
    height: 100%;
    background: red;
  }

<div id="status">
  <div id ="wrapLeft">
    <input type="text" placeholder="username"/>
    <input type="password" placeholder="password"/>
  </div><!--
--><div id ="wrapRight">
    <input type="text" placeholder="url"/>
    <input type="text" placeholder="url"/>
  </div>
</div>

Hide result

<!-- --> for code space

if you need support for ie7