Q:

arrange block elements in a single horizontal line

I dont know, either I am not that good in the art of 'search' or this topic is so so simple that nobody generally asks this but I have been searching this ever since i started my website. 
I have only four block elements on my webpage.

The first Block element displays on the top alone
The second, third and fourth block elements, I want arranged in a single horizontal line from next line
At present I am using the table to do this, but its bad styling, isn't it?!
Please tell me a way in which I can bring all those 3 block elements in the same line

At present, if I remove the table property, my block elements move to next line.
This is how it looks if i remove the table property:
^^^^^^^^^Block element: top^^^^^^^^^^^^
^^^^Block2^^^^^
^^^^Block3^^^^^
^^^^Block4^^^^^
I want block elements 2,3,4 in same line like this:
^^^^Block2^^^^^  ^^^^Block3^^^^^  ^^^^Block4^^^^^

A:

You can try display:inline-block or float:left.
<html>
  <head>
    <style type="text/css">
      div {
      border: 1px black solid;
      }
    </style>
  </head>
  <body>
    <div>aaa</div>
    <div>bbbbbb</div>
    <div>cccc</div>
  </body>
</html>

<html>
  <head>
    <style type="text/css">
      div {
      border: 1px black solid;
      display: inline-block;
      }
    </style>
  </head>
  <body>
    <div>aaa</div>
    <div>bbbbbb</div>
    <div>cccc</div>
  </body>
</html>

<html>
  <head>
    <style type="text/css">
      div {
      border: 1px black solid;
      float: left;
      }
    </style>
  </head>
  <body>
    <div>aaa</div>
    <div>bbbbbb</div>
    <div>cccc</div>
  </body>
</html>

These are the effects on Chrome.

