Skip to Content
Learn
Boundaries and Space
Using Float

Nice work! The navbar is starting to come together nicely. It would be even better if we could get the Contact button to fill in the empty corner on the bottom right.

To achieve this, we can use the CSS float property. By using float, we have the option of floating elements left or right.

Consider the example code below. The class selector, .logo, floats left, and the id selector #search-bar floats right:

.logo { float: left; } #search-bar { float: right; }

Let’s arrange the Contact button using float.

Instructions

1.

In main.css, locate the class selector .contact-btn and assign it float: right;.

Run your code and view the results in the web browser.

Folder Icon

Take this course for free

Already have an account?