Two div blocks on same line

How to center on the same "line" two div blocks?

First div:

<div id=bloc1><?php echo " version ".$version." Copyright &copy; All Rights Reserved."; ?></div>

Second div:

<div id=bloc2><img src="..."></div>

Solution 1:

CSS:

#block_container
{
    text-align:center;
}
#bloc1, #bloc2
{
    display:inline;
}

HTML

<div id="block_container">

    <div id="bloc1"><?php echo " version ".$version." Copyright &copy; All Rights Reserved."; ?></div>  
    <div id="bloc2"><img src="..."></div>

</div>

Also, you shouldn't put raw content into <div>'s, use an appropriate tag such as <p> or <span>.

Edit: Here is a jsFiddle demo.

Solution 2:

You can do this in many way.

Using display: flex

#block_container {
    display: flex;
    justify-content: center;
}

<div id="block_container">
  <div id="bloc1">Copyright &copy; All Rights Reserved.</div>
  <div id="bloc2"><img src="..."></div>
</div>

Using display: inline-block

#block_container {
    text-align: center;
}
#block_container > div {
    display: inline-block;
    vertical-align: middle;
}

<div id="block_container">
  <div id="bloc1">Copyright &copy; All Rights Reserved.</div>
  <div id="bloc2"><img src="..."></div>
</div>

using table

<div>
    <table align="center">
        <tr>
            <td>
                <div id="bloc1">Copyright &copy; All Rights Reserved.</div>
            </td>
            <td>
                <div id="bloc2"><img src="..."></div>
            </td>
        </tr>
    </table>
</div>

Solution 3:

I think now, the best practice is use display: inline-block;

look like this demo: https://jsfiddle.net/vjLw1z7w/

EDIT (02/2021):

Best practice now may be to using display: flex; flex-wrap: wrap; on div container and flex-basis: XX%; on div

look like this demo: https://jsfiddle.net/42L1emus/1/

Solution 4:

You can use a HTML table:

<table>
<tr>
<td>
<div id="bloc1">your content</div>
</td>
<td>
<div id="bloc2">your content</div>
</td>
</tr>
</table>

Solution 5:

Try an HTML table or use the following CSS :

<div id="bloc1" style="float:left">...</div>
<div id="bloc2">...</div>

(or use an HTML table)