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 a block element?

<div>Web Programming and Development</div>

Which CSS code displays the text underlined?

font-style: italic; text-decoration: underline; font-weight: 500;

h2 {
  text-decoration: underline;
}

Click on the JavaScript function that can access other function after a specified time.

insertBefore() setTimeout() querySelector()

function someFunction() { alert("CoursesWeb.net"); }
setTimeout("someFunction()", 2000);

Click on the instruction that returns the number of items of a multidimensional array in PHP.

count($array) count($array, 1) strlen()

$food =["fruits" =>["banana", "apple"), "veggie" =>["collard", "pea"));
$nr_food = count($food, 1);
echo $nr_food;       // 6