CODEWITHSUNDEEP
htmlcss
Johnyb
Johnyb

Reputation: 1316

put two divs next to each other

I am trying 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;
  }

Yet somehow the divs arent on same level, the right one is below the left one. How to fix this? I tried using left and right float but it doesnt align which should. What could cause this?example

Thanks for help

Upvotes: 4

Views: 107

Answers (7)

Moaz Mabrok
Moaz Mabrok

Reputation: 730

That should fix it

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>

the <!-- --> for spaceing the code

if you need support for ie7

Upvotes: 0

Sumon Tito
Sumon Tito

Reputation: 105

For older browser support, you can use CSS float and width properties.

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>

Upvotes: 1

kamyl
kamyl

Reputation: 6376

Additional spacing and offset comes from white spaces you display with white-space: pre. These white spaces comes from indents between html tags. You need to remove that property from #status and put it in separate element (<p> for example) which would contain just text you want to cut with text-overflow: ellipsis.

Upvotes: 0

Awais Umar
Awais Umar

Reputation: 2075

You are using white-space: pre on the container status along with indenting your code with extra spaces.
A better approach would be to remove that property and use padding on wrapLeft and wrapRight.

In your current code, try removing vertical space from wrapRight like this.

<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>

Upvotes: 0

Damon Dudek
Damon Dudek

Reputation: 181

Remove the property of your id in css:

white-space: pre;

See the documentation for this property: https://www.w3schools.com/cssref/pr_text_white-space.asp

Upvotes: 0

coder_1432
coder_1432

Reputation: 283

I've looked into it and the issue is caused by white-space : pre in the css. So you need to remove that and then position the inputs accordingly inside the divs.

<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>

Upvotes: 0

Sumon Tito
Sumon Tito

Reputation: 105

Use display:flex for main div.

Also look at the CSS, I have removed some of 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's 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>

Upvotes: 1

Related Questions