divide row into two equal columns using two spans

Question

Following is my simple html:

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<span style="display:inline-block;width:49%;text-align:center"> some text</span>
                 <span style="display:inline-block;width:49%;text-align:center"> some text</span>

</body>
</html>

I want row to be divided into 2 equal space/columns but when I use 50% width, second span comes to the next row.

What I did?

fixed both widths to 49% then it is working but I want space to be equally divided using 50%.

What am I missing?

cool... nice to know about this issue.. – Sandeep Sharma Jan 24 '17 at 07:13 — Sandeep Sharma, Jan 24 '17 at 07:13

score 1 · Answer 1 · answered Jan 24 '17 at 07:01

Using Flex

.wrap{
    display: flex;
    justify-content: center;
    align-items: center;
}

.block-a{
  width:50%;
  background:green;
  
}

.block-b{
  width:50%;
  background:gold;
  
}

<div class="wrap">

<span class="block-a"> some text</span>
<span class="block-b"> some text</span>

</div>

Using Flot

.block-a{
  width:50%;
  background:green;
  float:left;
  
}

.block-b{
  width:50%;
  background:gold;
   float:right;
}

<div class="wrap">

<span class="block-a"> some text</span>
<span class="block-b"> some text</span>

</div>

score -1 · Answer 2 · answered Jan 24 '17 at 06:58

-1

add float:left

Check this JSFiddle

answered Jan 24 '17 at 06:58

Karuppiah RK

3,894
9
40
80

1

Great.. Do you explain with some reasoning? – Sandeep Sharma Jan 24 '17 at 07:00

divide row into two equal columns using two spans

2 Answers2