CODEWITHSUNDEEP
htmlcss
user3196429
user3196429

Reputation: 67

Facing issue aligning two divs next to each other in HTML

I have been trying my hand at Electron and for that, I am trying to create 2 divs, next to each other. I have read a few solutions on here for aligning 2 divs next to each other, but nothing works for me. Here's my code so far:

Code

body, html {
    height: 100%;
}

.wrapper{
    height: 90%;
}

.request-pane {
    float:left; /* add this */
    margin-left: 10%;   
    height: 90%;
    width: 45%;
    border: 1px solid red;
}

.response-pane {
    float:right; /* add this */
    margin-left: 55%;
    height: 90%;
    width: 45%;
    border: 1px solid black;
}
<div class="wrapper">
    <div class="request-pane"></div>
    <div class="response-pane"></div>
</div>

Can anyone point me out what I'm doing wrong here? I am very new to HTML, so I don't know if the solution is too obvious or not

Upvotes: 1

Views: 56

Answers (4)

Amardeep Kumar Agrawal
Amardeep Kumar Agrawal

Reputation: 460

If you want even more simpler way, use bootstrap. Divide your screen into two halves. In each section create div. This will full fill your requirements.w3school is best website for this.

Upvotes: 0

Neeraj Kamat
Neeraj Kamat

Reputation: 354

Remove the margin-left property and also add display:inline-flex to the css class request-pane and response-pane as shown below.

body, html {
    height: 100%;
}

.wrapper{
    height: 90%;
}

.request-pane {
    float:left; /* add this */
    height: 90%;
    width: 45%;
    border: 1px solid red;
    display:inline-flex;
}

.response-pane {
    float:right; /* add this */
    height: 90%;
    width: 45%;
    border: 1px solid black;
    display:inline-flex;
}
<div class="wrapper">
    <div class="request-pane"></div>
    <div class="response-pane"></div>
</div>

This works fine. Do run the code from snippet,I hope that's the result you wanted.

Upvotes: 1

Dr M L M J
Dr M L M J

Reputation: 2397

you can do it by two ways.

  1. remove float atrribute and add

    .wrapper{ height: 90%; display: flex; }

  2. try using display:inline-block in css for both request-pane and response-pane

Upvotes: 2

extempl
extempl

Reputation: 3137

If you want to keep floats here - fixed with code

body, html {
  height: 100%;
}

.request-pane, .response-pane {
  box-sizing: border-box; /* count border inside of a `width` */
}

.wrapper {
  height: 90%;
}

.request-pane {
  float: left;
  margin-left: 10%;
  height: 90%;
  width: 45%;
  border: 1px solid red;
}

.response-pane {
  float: right;
  /* margin-left: 55%; */ /* this is a root of a problems */
  height: 90%;
  width: 45%;
  border: 1px solid black;
}
<div class="wrapper">
    <div class="request-pane"></div>
    <div class="response-pane"></div>
</div>

But yes, you probably better to go with flexbox. A good guide to it you can find here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/.

Also, it looks like you lack a basic understanding of how HTML/CSS work, so you'd better have some basics free courses to moving forward.

Upvotes: 1

Related Questions