Categories
design education technology

Master Your Website Layout with these 6 CSS Properties

3. Float

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:

Float left
Float left

You can float to the right too:

Float right
Float right

4. Clear

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.

Clear left
Clear left

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.

Float left and clear left with text wrap
Float left and clear left with text wrap

5. Top

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.)

Top property with relative positioning
Top property with relative positioning

6. Left

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.

Left property with a value of 50px
Left property with a value of 50px

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:

margin-right: auto;
margin-left: auto;

If you have any questions or feedback, I’d love to hear from you in the comments below.

Done

7 replies on “Master Your Website Layout with these 6 CSS Properties”

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.