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 adds a new line into a paragraph?

First line ...<br>
Other line...

Which CSS property can be used to add space between letters?

text-size word-spacing letter-spacing

#id {
  letter-spacing: 2px;
}

What JavaScript function can be used to get access to HTML element with a specified ID?

getElementById() getElementsByTagName() createElement()

var elm = document.getElementById("theID");
var content = elm.innerHTML;
alert(content);

Click on the "echo" correct instruction.

echo "CoursesWeb.net" echo "CoursesWeb.net"; echo ""CoursesWeb.net";

echo "Address URL: http://CoursesWeb.net";