How can I align two div blocks horizontally using CSS?

Positioning Two Div Blocks Horizontally

Align two div blocks on the same horizontal line by utilizing CSS and HTML techniques.

Solution:

CSS:

<code class="css">#block_container {
    text-align: center;
}
#bloc1, #bloc2 {
    display: inline;
}</code>

In this CSS, we:

• Center the parent container (#block_container) using text-align: center to horizontally align both div blocks.
• Set the display property of both div blocks (#bloc1 and #bloc2) to inline to make them appear on the same line.

HTML:

<code class="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></code>

Explanation:

1. The #block_container div serves as the parent container for both div blocks.
2. The text-align property of #block_container centers the content within it, including both #bloc1 and #bloc2.
3. By setting the display property to inline for #bloc1 and #bloc2, they are displayed on the same horizontal line.

Additional Notes:

• Use appropriate HTML tags for content placement instead of placing raw content in
  s. For text, use

  or , for example.

• A demonstration of this solution can be found on jsFiddle.

The above is the detailed content of How can I align two div blocks horizontally using CSS?. For more information, please follow other related articles on the PHP Chinese website!