Reputation: 985

Is there a way to place html side by side

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

Upvotes: 0

Answers (4)

CodeByAk

Reputation: 227

<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.

Upvotes: 1

MFerguson

Reputation: 1767

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>

Upvotes: 1

Snake_py

Reputation: 582

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>

Upvotes: 2

Gurkan Atik

Reputation: 478

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>

Upvotes: 1

Is there a way to place html side by side

Answers (4)

Related Questions