Learning Code

Float and Basic Menus

Float allows text to wrap around images and for a list to be transformed into a basic horizontal menu.

Float

Floating takes an element out of the normal flow of the page, either to the left or to the right. Text elements will automatically wrap around the floated element.

Values

left: element moves to the left and following elements move to the right of that element
right: element moves to the right and following elements move to the left of that element

In Action

If I add a class to my image such as .leftimg {float: left;}, I should end up with the text (that follows) wrapping around my image. The more text you have here, the more dramatic this will be. If you make your browser less wide, the float will also become more obvious.

Clear

To stop an element from flowing with or wrapping around a floated element, use clear. Values for clear include: left, right, both, none, and inherit.
.text {clear: both;}

Menu

Float and clear can be extremely helpful if you are creating a horizontal navigation bar using a list.


Here is my HTML:
missing

My CSS looks like this:
.horizon li {float: left; list-style: none;}
.horizon a {display: block; width: 150px; background: white; margin: 10px; text-align: center;}


The important properties are display and float. The other properties are just personalized styling. I could also customize the styles for other link states. Keep in mind you may need to add the clear property to surrounding elements.

Can you use the Try-it Editor to try out these concepts?