How can I keep two rows inline to each other at a 50% width?

Question

I have two rows that I would like to be inline to each other while they both have a width of 50%.

Blueprint:

I have color coded row 1 red and row 2 blue to make it easier to see. As you can see, row 2 is below row 1 because I believe there is not enough room to display them both having a 50% width. How can I overcome this?

My advice is using some front-end framework like bootstrap or materialize. It's easy to create grid — vicnoob, Jan 31 '18 at 03:15

score 4 · Answer 1 · answered Jan 31 '18 at 03:20

inline elements have white space between them if there's white space in the HTML.

You can see this by taking the opening div of your blue row and putting it immediately after the closing div of your red row; no space, no line break. Once you remove the break they will be side by side.

</div><div class="row2">

Instead of using inline-block, check out flexbox if your target browsers support it. Otherwise remove the white space, set the font-size to 0 or use floats.

vicnoob · Accepted Answer · 2018-01-31T03:18:58.480

1

Add float attribute to your row1 and row2

https://jsfiddle.net/6a97hr0n/1/

.row1{
  background-color: red;
  height: 100%;
  width: 50%;
  display: inline-block;
  float: left;
}

.row2{
  background-color: blue;
  height: 100%;
  width: 50%;
  display: inline-block;
  float: left;
}

edited Jan 31 '18 at 03:18

answered Jan 31 '18 at 03:17

vicnoob

1,169
13
27

1

Probably not the best solution, but I'll accept this. Thanks! – linux932 Jan 31 '18 at 03:18
1

Yea it's just a situational solution ^^ – vicnoob Jan 31 '18 at 03:19

score 1 · Answer 3 · answered Jan 31 '18 at 03:18

1

From your css,

i think you lack the float attribute and you should also calculate the padding also.

Example: total width:100%: row1: 49% padding:2% row2:49%

Or if you want to use pixel, please search with calc attribute in css. Hope that help!

answered Jan 31 '18 at 03:18

Huy Nguyen

1,931
1
11
11

score 1 · Answer 4 · answered Jan 31 '18 at 03:36

Your idea is right but you did not calculate the border left, right of both of 2 boxes. When you calc both of them, the width of box is greater than 50%. I also update some codes as below:

<div class="row row1">
    <div class="paper">
        <h1>USDT Wallet</h1>
        <h3>$0.00</h3>
    </div>
    <div class="paper">
        <h1>Convert</h1>
        <button>Convert USDT to LTC*</button>
        <br><br>
        <button>Convert LTC to USDT*</button>
        <p>*1% fee applies</p>
    </div>
</div>

<div class="row row2">
    <div class="paper">
        <h1>USDT Wallet</h1>
        <h3>$0.00</h3>
    </div>
    <div class="paper">
        <h1>Convert</h1>
        <button>Convert USDT to LTC*</button>
        <br><br>
        <button>Convert LTC to USDT*</button>
        <p>*1% fee applies</p>
    </div>
</div>

CSS:

.row{
  height: 100%;
  width: 49.5%;
  display: inline-block;
}

.row1{
  background-color: red;
}

.row2{
  background-color: blue;
}

How can I keep two rows inline to each other at a 50% width?

4 Answers4