Align DIVs on the same line

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>

<<-Download HTM resources -- Display UL bullets and ..->>

Daily Test with Code Example

HTML

CSS

JavaScript

PHP-MySQL

Which tag is used in <table> to create table header cell?

<table><tr>
  <th>Title 1</th>
  <th>Title 2</th>
</tr></table>

Which CSS property sets the distance between lines?

line-height word-spacing margin

.some_class {
  line-height: 150%;
}

Which function opens a new browser window.

alert() confirm() open()

document.getElementById("id_button").onclick = function(){
  window.open("http://coursesweb.net/");
}

Indicate the PHP function that returns an array with names of the files and folders inside a directory.

mkdir() scandir() readdir()

$ar_dir = scandir("dir_name");
var_export($ar_dir);