The float CSS property defines where a div will be positioned within or next to other elements. “Float: left” can be very useful to align divs horizontally rather than vertically. The default value for float is none.
Going back to our simple divs, let’s add a float of left to both. It aligns them horizontally if there’s room in the browser window:
You can float to the right too:
The clear CSS property prevents floating elements from hanging around to the left or right (or both) of a div. We can do some pretty cool things with clear. The default value is none.
Let’s go back to our left-floated divs above in number 3. If we add a green div below it, we can pop it below the first two div using the clear property set to left. Without this clear property, the green div does a really funky overlap with the other two divs.
If you use those same two left-floated divs, and add the left clear to the second one, it’s even cooler. You can put text below the divs in the HTML, and it will wrap around the divs to the right.
The top CSS property identifies how far down from the top edge of the parent element (or browser window) the div will be placed. The value can be positive (moving down) or negative (moving up).
Back to our simple divs: add a relative position to the orange div and a top value of 50px. It will move down 50px relative to the purple div above it (if we had used absolute positioning, the orange div would be 50px down from the top edge of the browser window.)
The left CSS property identifies how far across from the left edge of the parent element (or browser window) the div will be placed. The value can be positive (moving right) or negative (moving left).
Working with the same divs from number 5 above, we add a left property of 50px to the orange div as well, it moves to the right too.
Bonus Tip: Centering a Div
If you want to center a div on the page, like the “wrapper” div that contains by whole site here, use these properties:
If you have any questions or feedback, I’d love to hear from you in the comments below.