How to Float a Text Div

The float property ensures page content will not be positioned and hidden behind your div.

When creating a website with HTML and cascading style sheets (CSS), there are many options available for the positioning of elements within your page. A division, or div, is a container element that holds content and can be displayed at a specific size and position on the page, allowing content to be viewed exactly how and where you want it. Float, a CSS positioning element, can be used with a div to remove it from the position in line with text and place it to the side of the page.

Instructions

1. Add a style tag to your div by typing "style = " after the word "div" and before the closing bracket.

2. Add a pair of quotation marks after the equal sign, then type "float:" within the quotation marks.

3. Add "left;" after the colon added in Step 2 to make the div show up on the left of the page. Add "right;" for it to appear on the right of the screen or "inherit;" to follow the float behavior of the parent div or page element.

Tips & Warnings

• Float will not function properly if your div has a position attribute such as "absolute" or "fixed."

References

• W3Schools: CSS Float Property
• W3Schools: CSS Position Property
• W3Schools: HTML Styles