How to Fix Web Pages That Have Overlapping Boxes

By Brandy Alexander

Updated September 15, 2017

As you build multiple boxes into your Web pages, the boundaries of these forms have a tendency to overlap. These boundaries, which usually outline your content or other data, bump into each other when the box dimensions are not spaced far enough apart. You have the ability to repair these issues by knowing where to edit the HyperText Markup Language (HTML) or Cascading Style Sheets (CSS) code that makes your boxes. Use your computer’s text editor program to fix the overlapping boxes in your Web pages.

Start your text editor program and bring up the Web page that has the overlapping boxes.

Locate the code that makes up your boxes. If your boxes are created with HTML tables, look for the "

" tag in the main body of the document. Alternately, check for CSS style rules that reside between the "" elements at the top of your page.

Change the HTML table width value to a smaller number to fix the overlap. For example, modify "

" to "
" to decrease the size. With CSS, edit the rules that contain the "width" or "height" attribute to minimize your boxes. To illustrate, switch "box1 { width:400px; height:400px; }" to "box1 { width:300px; height: 300px; }" to make the modification.

Save your file and launch your Web browser. Click the "Open" or "Open File" option under your browser's "File" menu and select your document to preview your new boxes on the page. If necessary, go back and edit your box values and then save your work again.


Check your Web page on various browsers to see how your smaller boxes appear. Your boxes have the potential to display differently, depending on the browser used.