How to Prevent DIV to Overlap CSS

"Div" tag elements provide HTML developers with containers, so you can format text and layouts in your web pages. The default setting for a div lets the text overlap over other div elements on your pages. You can override this default by setting the "overflow" property to scroll or clip the overlapping text. This means that a scroll bar is shown or the text is cut off if it extends the width or height of the div element.

Instructions

1. Right-click the HTML file that contains the div element you want to edit. Click "Open With" in the popup menu. Double-click the HTML editor you want to use to edit the div tag properties.

2. Scroll down the HTML page to the div you want to edit. You can also do a quick find for the element by pressing "Ctrl" and "F." This key combination opens the "Find" text box. Type the div tag's name in the text box, and press "Enter."

3. Type the following CSS code in the div tag to add a scroll bar to the element if text overflows:

   overflow:scroll;

   If you want to clip the text and leave out the scroll bar, use the following CSS code instead:

   overflow:hidden;

4. Press the "Ctrl" and "S" combination to save the changes. If you want to view the changes before publishing to your website, double-click the HTML file on your hard drive to view it in your browser.

References

• W3 Schools: CSS Overflow Property