To align and display multiple <div> tags on the same line, you can use one of these CSS properties: display: inline-block;, or float ('left', or 'right').
- To make a responsive design, so the DIV elements to remain aligned on the same line when the browser's window is resized, use percentage values for the sizes of the DIVs, and margins.


Align multiple Div elements with inline-block

In the following example, the <div> elements have inline-block property.

<style>
#left, #center, #right {
 position: relative;
 display: inline-block;
 margin: 1em 0.1em 0.1em 0.8%;
 padding: 0.1em;
 background: #ebebfb;
 border: 2px solid blue;
}
#left {
 width: 22%;
 height: 20em;
}
#center {
 width: 52%;
 height: 30em;
}
#right {
 width: 16.2%;
 height: 20em;
}
</style>

<h4>Align Divs with inline-block</h4>

<div id='left'>
 <div>
 <a href='//coursesweb.net/' title='Web Courses'>CoursesWeb.net</a><br/>
 <a href='//marplo.net/' title='MarPlo.net'>MarPlo.net</a><br/>
 <a href='//gamv.eu/' title='Flash Games'>Flash Games</a><br/>
 </div>
</div>

<div id='center'>
 <p>Content in the center Div.<br/>
 HTML Course and Tutorials - Align DIVs</p>
</div>

<div id='right'>
 Content in the Div from right side.
</div>

Example Align with float

When you use the CSS float property, you have to add a HTML element with clear: both; after the last DIV which have applied float, so this property to not affect the other items that you want to display after the aligned DIVs.

<style>
#left, #center, #right {
 position: relative;
 float: left;
 margin: 1em 0.1em 0.1em 0.8%;
 padding: 0.1em;
 background: #ebebfb;
 border: 2px solid blue;
}
#left {
 width: 22%;
 height: 20em;
}
#center {
 width: 52%;
 height: 30em;
}
#right {
 width: 16.2%;
 height: 20em;
}
.clr { clear: both; } /* to anulate the effect of the float */
#footer {
 position:relative;
 width: 99%;
 height: 10em;
 margin: 1em auto 0.2em auto;
 background: #befbbe;
}
</style>

<h4>Align with float</h4>

<div id='left'>
 <div>
 <a href='//coursesweb.net/' title='Web Courses'>CoursesWeb.net</a><br/>
 <a href='//marplo.net/' title='MarPlo.net'>MarPlo.net</a><br/>
 <a href='//gamv.eu/' title='Flash Games'>Flash Games</a><br/>
 </div>
</div>

<div id='center'>
 <p>Content in the center Div.<br/>
 HTML Course and Tutorials - Align DIVs using float:left;</p>
</div>

<div id='right'>
 Content in the right side Div.
</div>
<br class='clr' />

<div id='footer'>
 Div under the DIVs aligned with 'float: left', after the tag with 'clear: both;'.
</div>

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which HTML5 tag is indicated to be used as container for menu with navigation links in Web site?
<section> <nav> <article>
<nav><ul>
 <li><a href="http://coursesweb.net/css/" title="CSS Course">CSS Course</a></li>
 <li><a href="http://www.marplo.net/jocuri/" title="Flash Games">Flash Games</a></li>
</ul></nav>
Which CSS property shifts an item horizontally to the left or right of where it was?
text-align clear float
.some_class {
  width: 30%;
  float: left;
}
Click on the Math object method which returns x, rounded downwards to the nearest integer.
Math.ceil(x) Math.abs(x) Math.floor(x)
var num = 12.34567;
num = Math.floor(num);
alert(num);       // 12
Indicate the PHP function which returns the number of characters in string.
mb_strlen() count() stristr()
$str = "string with utf-8 chars åèö";
$nrchr = mb_strlen($str);
echo $nrchr;        // 30
Align DIVs on the same line

Last accessed pages

  1. JavaScript Course - Free lessons (17194)
  2. Multiple Select Dropdown List with AJAX (16654)
  3. Read Excel file data in PHP - PhpExcelReader (72735)
  4. Create simple Website with PHP (25547)
  5. MSLA2 - Filter Content with Multiple Select Lists with Ajax (1812)

Popular pages this month

  1. Making DIV Contents Scroll Horizontally, with multiple Div`s inside (1484)
  2. Contact page - CoursesWeb (1455)
  3. Tabs effect with CSS (1448)
  4. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (567)
  5. PHP getElementById and getElementsByTagName (429)