Is there a way to place html side by side-CodePudding

below html code gives the output as shown below. Is there a way to create 2 more side by side

<div style = "font-size: 35px;display: inline-block; padding-left:10px"><span> Weekly : 12k </span></div><br>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
<div style = "background-color:lightgreen;color:green;font-size: 25px;display: inline-block; padding-left:10px"><span> - 43% YoY </span></div>
<br>&nbsp&nbsp&nbsp&nbsp&nbsp
&#x25B2<div style = "color:red;font-size: 15px;display: inline-block; padding-left:10px"><span> 34 pts vs. last period </span></div>

Expected output

CodePudding user response：

There are many was to achive what you want to do, the most common way nowadays is display: flex.

Here I will just point you into the three main directions which are mostly used on the web:

legacy: floats - make your own float grid:

https://css-tricks.com/dont-overthink-it-grids/

currently used: flex boxes - I would say the easiest way for beginners:

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

The future which probably will live beside flexboxes: css grid:

https://css-tricks.com/snippets/css/complete-guide-grid/

You can also utilize a css framework, If it is just a layout you are after then I would recommend using

http://getskeleton.com/

If you have trouble understanding any of these technologies it would be great if you ask a more specific question.

To answer your question with your code:

<div style = "display: flex;">
<div style = "font-size: 35px; padding-left:10px"><span> Weekly : 12k </span></div><br>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
<div style = "background-color:lightgreen;color:green;font-size: 25px; padding-left:10px"><span> - 43% YoY </span></div>
<br>&nbsp&nbsp&nbsp&nbsp&nbsp
&#x25B2<div style = "color:red;font-size: 15px; padding-left:10px"><span> 34 pts vs. last period </span></div>
</div>

CodePudding user response：

Here is a solution using CSS and column implementation.

<style type="text/css">
.column
    {
        float: left;
        width: 25%;
    }
</style>

<div class="column">
  <div style = "font-size: 35px;display: inline-block; padding-left:10px"><span> Weekly : 12k </span></div><br>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
<div style = "background-color:lightgreen;color:green;font-size: 25px;display: inline-block; padding-left:10px"><span> - 43% YoY </span></div>
<br>&nbsp&nbsp&nbsp&nbsp&nbsp
&#x25B2<div style = "color:red;font-size: 15px;display: inline-block; padding-left:10px"><span> 34 pts vs. last period </span></div>
  
</div>

<div class="column">
  <div style = "font-size: 35px;display: inline-block; padding-left:10px"><span> Weekly : 12k </span></div><br>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
<div style = "background-color:lightgreen;color:green;font-size: 25px;display: inline-block; padding-left:10px"><span> - 43% YoY </span></div>
<br>&nbsp&nbsp&nbsp&nbsp&nbsp
&#x25B2<div style = "color:red;font-size: 15px;display: inline-block; padding-left:10px"><span> 34 pts vs. last period </span></div>
  
</div>

<div class="column">
  <div style = "font-size: 35px;display: inline-block; padding-left:10px"><span> Weekly : 12k </span></div><br>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
<div style = "background-color:lightgreen;color:green;font-size: 25px;display: inline-block; padding-left:10px"><span> - 43% YoY </span></div>
<br>&nbsp&nbsp&nbsp&nbsp&nbsp
&#x25B2<div style = "color:red;font-size: 15px;display: inline-block; padding-left:10px"><span> 34 pts vs. last period </span></div>
  
</div>

CodePudding user response：

you can use display flex.

check this out !

.wrapper{display:flex;}
.box{background:red; width:100px;height:100px; margin-left:15px;}

<div class="wrapper">

  <div>
    <div style = "font-size: 35px;display: inline-block; padding-left:10px"><span> Weekly : 12k </span></div><br>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
    <div style = "background-color:lightgreen;color:green;font-size: 25px;display: inline-block; padding-left:10px"><span> - 43% YoY </span></div>
    <br>&nbsp&nbsp&nbsp&nbsp&nbsp
    &#x25B2<div style = "color:red;font-size: 15px;display: inline-block; padding-left:10px"><span> 34 pts vs. last period </span></div>
  </div>
  <div class="box">
  </div>
  <div class="box">
  </div>

</div>

CodePudding user response：

<div style="display: flex; flex-direction: row">
<div>
<div style = "font-size: 35px;display: inline-block; padding-left:10px"><span> Weekly : 12k </span></div><br/>
<div style = "background-color:lightgreen;color:green;font-size: 25px;display: inline-block; padding-left:10px"><span> - 43% YoY </span></div> <br/>
<div style = "color:red;font-size: 15px;display: inline-block; padding-left:10px"><span> 34 pts vs. last period </span></div>
</div>
<div>
<div style = "font-size: 35px;display: inline-block; padding-left:10px"><span> Weekly : 12k </span></div><br/>
<div style = "background-color:lightgreen;color:green;font-size: 25px;display: inline-block; padding-left:10px"><span> - 43% YoY </span></div> <br/>
<div style = "color:red;font-size: 15px;display: inline-block; padding-left:10px"><span> 34 pts vs. last period </span></div>
</div>
<div>
<div style = "font-size: 35px;display: inline-block; padding-left:10px"><span> Weekly : 12k </span></div><br/>
<div style = "background-color:lightgreen;color:green;font-size: 25px;display: inline-block; padding-left:10px"><span> - 43% YoY </span></div> <br/>
<div style = "color:red;font-size: 15px;display: inline-block; padding-left:10px"><span> 34 pts vs. last period </span></div>
</div>
<div>

I just added style flex and flex direction row. Issue will resolved but it is not good practice to write inline css.

Use flex related css and try to declare the css classes.