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.