How to Stop DIV Overlapping

Written by matthew weeks
  • Share
  • Tweet
  • Share
  • Pin
  • Email
How to Stop DIV Overlapping
You can eliminate overlapping DIV containers by adjusting their display properties. (Stockbyte/Stockbyte/Getty Images)

When using DIV containers in the design of your Web page, you may feel the need to specify the height, width, and positioning of the individual containers relative to the browser window and to each other. However, when doing so, you may find that your DIV containers overlap with one another and cause your visual layout to break. Fortunately, you can solve this problem by using the HTML display style element.

Skill level:
Moderately Easy

Other People Are Reading


  1. 1

    Open the Web page with the overlapping DIV containers in your preferred text editor.

  2. 2

    Move your cursor to the tag of the first DIV container whose display properties you wish to adjust.

  3. 3

    Insert the following code into the tag of the DIV container:


  4. 4

    Repeat Step 3 with each subsequent DIV container that is overlapping another.

  5. 5

    Save and publish your web page. The DIV containers you have adjusted will now stretch to fill the available horizontal space, adjust their vertical heights to accommodate all of the content within them, and not overlap one another.

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.