How to Fix Web Pages That Have Overlapping Boxes


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 "<table>" tag in the main body of the document. Alternately, check for CSS style rules that reside between the "<head></head>" elements at the top of your page.

  • Change the HTML table width value to a smaller number to fix the overlap. For example, modify "<table width="400">" to "<table width="300">" 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.

Related Searches


Promoted By Zergnet



You May Also Like

Related Searches

Is DIY in your DNA? Become part of our maker community.
Submit Your Work!