How To Align DIV In Straight Line (Horizontally) With CSS?

This Article Was Live On February 11th, 2013 And So Far Have: 2 Comments...
Last Updated on June 21st, 2014

I have been asked this question several times – How to align two DIV’s next to each other using CSS. Here’s a simple solution that I have been using for quite a while now. When playing with custom web designs, or off the shelf templates, the most common CSS work involves changing the margin, padding, color and background of HTML elements. I usually also usually align elements either to the left, right, or center using CSS.If you want to align a div to the right and another div opposite to the first on the left you can use the following CSS classes.

I have found that when I used both div that float both to the right and left that you have to follow that with an empty div that clears, or resets, the float CSS property. If I don’t clear the float property other elements such as a menu that is aligned to the right might not render correctly. Here is the CSS class to clear the float property, use it in a div the divs that have been aligned to the right, left, or both right and left.

I’d like to have a series of thumbnails next to each other in a horizontal line with a sight padding and their caption underneath each thumbnail. The thumbnails need to wrap according to the width of the DIV they reside in (for example three images per row). If I don’t float the images they appear underneath each other in a vertical line. If I do float the images they cascade diagonally from each other with the caption appearing at the top right of the thumbnail. I’m obviously doing something wrong but can’t see what it is.

Recommended For You:

Simple Custom Select Dropdown Example Using Pure JavaScript

CLICK HERE TO SEE DEMO

Table of Contents

Features:

1.) Your All DIV Will Remain In Straight Line.
2.) You Can Also Add More CSS To Your DIVs Easily.
3.) Simple Short CSS Code To Do This In Valid Way.

How To Add In Blogspot?

1.) Go To Your www.blogger.com
2.) Open Your Desire Blog.
3.) Go To “Layout“.
4.) Click “Add A Gadget” Where You Want To Add It.
5.) Now Scroll To “HTML-JAVASCRIPT“
6.) Click “+” Icon To Add It.
7.) Now Copy The Below Code And Paste It To There.
8.) Leave The Title Empty.
9.) Click Save, Now You Are Done.

How To Add In Website?

1.) Just Go To Your HTML File.
2.) Now Copy The Below Code And Paste It Between “<body> </body>“.
3.) Save It, Now You Are Done.

<style type="text/css">div.inline { float:left; }</style>
<div class="inline">123</div>
<div class="inline">ABC</div>
<div class="inline">@@@</div>
<div style="clear:both;" />

Customization:

1.) Just Add More CSS According To Your Desire.
2.) You Must Have To Add <div style=”clear:both;” /> Line In Order To Keep It OK.
3.) You Can Add Extra DIVs Also.

Recommended For You:

Getting Code Executed Inside PRE/CODE Tags Even They Are Properly Escaped