How to Align Divs Horizontally in CSS

Written by ameen aliyar
  • Share
  • Tweet
  • Share
  • Pin
  • Email
How to Align Divs Horizontally in CSS
HTML div tags have eliminated the need to use tables for page layout. (Comstock/Comstock/Getty Images)

HTML div tags define the layout of Web pages. Cascading style sheets are used for styling HTML tags within Web pages. The "id" or "class" property of HTML tags are called within CSS to apply certain styles to HTML tags. Styles that are common to several div tags may be assigned to a "class" property, while unique styles should be assigned to the "id" property of the particular div tag, as each id tag can be used only once. Adjacent div elements will appear below the preceding div element by default unless styled to line up horizontally.

Skill level:

Things you need

  • Text editor

Show MoreHide


  1. 1

    Open the HTML page and the attached CSS file in two different windows in a basic HTML editor or text editor, such as Notepad.

  2. 2

    Locate all the div tags that needs to be aligned and assign the unique class name "halign":

    <div class="halign">First div</div>

    <div class="halign">Second div</div>

    <div class="halign">Third div</div>

    If "halign" has already been used as a class name elsewhere in the HTML, use a different name, but make sure it is unique.

  3. 3

    Assign "id" names for all the div elements that need to be aligned. Include numbers within the "id" names to identify the order of placement. Alternatively assign "box 1," "box2" and so forth as "id" names:

    <div id="box1" class="halign">First div</div>

    <div id="box2" class="halign">Second div</div>

    <div id="box3" class="halign">Third div</div>

    If "id" names have already been assigned, then take note of the existing "id" names.

  4. 4

    Go to the CSS file and insert:

    .halign { position: absolute; top: XXX; }

    Replace "XXX" with the margin value between the absolute top and the horizontal alignment line. Use pixel values or percentages, depending on other div elements that are placed above the "halign" class.

  5. 5

    Edit individual div style blocks in CSS. Find the div "id" names in the CSS and add the "left: YYY;" code line within each code block. Replace "YYY" with the absolute margins to the left of the div elements. Absolute margin is the total space from the edge of the browser screen towards the corresponding div. The margins will go up per div to place them side by side:

    box 1 { margin-left:100px; }

    box 2 { margin-left:400px; }

    box 3 { margin-left:700px; }

  1. 1

    Open the CSS file in a text editor window.

  2. 2

    Define a unique "class" name, such as "halign," and insert "float:left;" in the code block and save the file.

  3. 3

    Open the HTML in a different text editor window and make sure all the div elements that need to be aligned are placed adjacently.

  4. 4

    Attach the "class" name "halign" to the adjacent div elements that need to be aligned.

  5. 5

    Place the following code above the group of div elements in HTML:

    <div style="clear: both;"></div>

Tips and warnings

  • If any class name has already been assigned to any of the concerned divs, insert additional class names and separate them with a space character. Use percentages for margin and space values if the overall Web page has a fluid width, and the layout blocks and margins will resize themselves according to the screen size and resolution. Design elements on fixed-width Web pages are not responsive to the screen size or resolution, and pixel values are suitable for margins.
  • Certain CSS code produces unique behaviours within different browsers. Cross browser compatibility must be tested for all CSS and HTML coding. Failing to test for this might hinder the accessibility and usability of the Web page.

Don't Miss

  • All types
  • Articles
  • Slideshows
  • Videos
  • Most relevant
  • Most popular
  • Most recent

No articles available

No slideshows available

No videos available

By using the site, you consent to the use of cookies. For more information, please see our Cookie policy.