CODEWITHSUNDEEP
htmlcss
linux932
linux932

Reputation: 963

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

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

Blueprint: enter image description here

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?

Upvotes: 1

Views: 1710

Answers (4)

Khoi Ngo Nguyen
Khoi Ngo Nguyen

Reputation: 174

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

Upvotes: 1

andrewmcconville
andrewmcconville

Reputation: 41

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.

Upvotes: 4

vicnoob
vicnoob

Reputation: 1183

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

Upvotes: 1

Huy Nguyen
Huy Nguyen

Reputation: 2061

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!

Upvotes: 1

Related Questions