How to put two elements side by side

Question

Im trying to put two elements side-by-side, but i can't get it to work. I tryed float: left and display: inline-block and none of it worked. I tryed putting inline styling, file styling, head styling and none of it worked.

HTML: `

{% extends "layout.html" %}
{% block title %} Home {% endblock %}
{% block head %}
  <script src="{{ url_for('static', filename='isp_home/main.js')}}"></script>
  <script src="{{ url_for('static', filename='libs/poseidon.min.js')}}"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
  <link href='https://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" href="{{ url_for('static', filename='isp_home/main.css')}}">
{% endblock %}
{% block body %}
  <div class="container" id="welcome" style="margin-top: 3%;">
    <h1 style="text-align: center;">Welcome back to Dataflow</h1>
    <h2 style="text-align: center;">Click to change view</h2>
  </div>
  <div class="container main" style="margin-top: 3%;">
    <div class="container main-info">
      <i class="fa fa-btc" style="font-size: 6em"></i>
      <h2> DataCoin wallet: </h2>
      <h3> DataCoins: 50 </h3>
      <h3> DataCoin Trust: 50 </h3>
    </div>
    <div class="container main-info">
      <i class="fa fa-server" style="font-size: 6em;"></i>
      <h2> Computating Power Usage: </h2>
      <h3> Decryption: 40% </h3>
      <h3> DataCoin Mining: 40% </h3>
      <h3> Spamming and Pishing: 20% </h3>
    </div>
    <div class="container main-info">
      <i class="fa fa-server" style="font-size: 6em"></i>
      <h2> Computating Power Usage: </h2>
      <h3> Decryption: 40% </h3>
      <h3> DataCoin Mining: 40% </h3>
      <h3> Spamming and Pishing: 20% </h3>
    </div>
  </div>
{% endblock %}

CSS:

body {
  background-color: #0d0d0d;
  font-family: 'Raleway';
  color: white;
}
* {
  font-family: 'Raleway';
  color: white;
}
.main-info {
  margin-top: 3%;
  margin-left: 0%;
  display: inline-block;
  float: left;
}
.main {
  width: 100%;
}

Are you trying to have all three of the .main-info divs floating next to each other on the same line? They seem to be doing that: https://jsfiddle.net/fLr8k1fr/1/. Or are you wanting two elements like you stated in the question? If so, which two elements? — Brad K., Mar 06 '16 at 23:27

score 1 · Accepted Answer · answered Mar 06 '16 at 23:36

You need set a width's value for the element ".main-info". The value doesn't have to be percent.

.main-info {
    margin-top: 3%;
    margin-left: 0%;
    display: inline-block;
    float: left;
    width: 30%;// could be 100px for example
 }

See https://jsfiddle.net/bgdvxce4/

How to put two elements side by side

1 Answers1