[html] 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>

HTML File

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

CSS File

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

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)

Use Simple HTML

<frameset cols="25%,*">
  <frame src="frame_a.htm">
  <frame src="frame_b.htm">
</frameset>

What I would first is make the following CSS code:

#bloc1 {
   float: left
}

This will make #bloc2 be inline with #bloc1.

To make it central, I would add #bloc1 and #bloc2 in a separate div. For example:

<style type="text/css">
    #wrapper { margin: 0 auto; }
</style>
<div id="wrapper">
    <div id="bloc1"> ... </div>
    <div id="bloc2"> ... </div>
</div>

Use a table inside a div.

<div>
   <table style='margin-left: auto; margin-right: auto'>
        <tr>
           <td>
              <div>Your content </div>
           </td>
           <td>
              <div>Your content </div>
           </td>
        </tr>
   </table>
</div>

Use below Css:

#bloc1,
#bloc2 {
display:inline
} 

body {
text-align:center
}

It will make the mentioned 2 divs in the center on the same line.

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/

You can do this in many way.

1. Using display: flex

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

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

2. Using display: inline-block

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

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

3. using table

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

diplay:flex; is another alternative answer that you can add to all above answers which is supported in all modern browsers.

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

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

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>