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 type of <input> creates a color well control for selecting a color value?
type="text" type="color" type="date"
<input type="color" name="get_color" />
Which CSS method rotates the HTML element at a given degree?
scale() translate() rotate()
#some_id:hover {
  transform: rotate(60deg);
  -ms-transform: rotate(60deg);    /* IE 9 */
  -moz-transform: rotate(60deg);   /* Firefox */
}
Click on the function that returns the number with the highest value.
pow() min() max()
var maxn = Math.max(8, 4, 88, 56);
alert(maxn);      // 88
Which function prevent the same file from being included more than once in a page?
include() include_once() require()
include_once("some_file.php");
Align DIVs on the same line

Last accessed pages

  1. The Prayer of the Frog (92)
  2. Node.js Move and Copy Directory (7996)
  3. querySelector and querySelectorAll (15457)
  4. Clear Canvas Context (5814)
  5. If Else conditionals, Comparative and Logical operators (3274)

Popular pages this month

  1. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (188)
  2. Register and show online users and visitors (123)
  3. PHP-MySQL free course, online tutorials PHP MySQL code (117)
  4. Read Excel file data in PHP - PhpExcelReader (115)
  5. JavaScript Course - Free lessons (98)