Display and Float

Display and float are CSS properties that I have decided to group together because they are often used together on the same element. Display specifies how the element will element appears in organizational terms to the browser. Float tells more about the alignment of the element.

CSS Display Property

Example
<style type="text/css">
    li.inline
    {
        display:inline;
        width:100px;
    }
</style>
<ul>
    <li class="inline">Item 1</li>
    <li class="inline">Item 2</li>
</ul>
Result
  • Item 1
  • Item 2

While the display property has many possible values, inline and block are the most common. Normally lists appear vertical; however, when we set the display property to inline for the li class “inline”, we can see the list displayed horizontally. The inline will continue to place elements horizontally until they reach a width of their parent container element. If we wanted the list elements to appear on different vertical levels, we should have set the display property to block.

CSS Float Property

Example
<style type="text/css">
    div.float_left
    {
        width:100px;
        float:left;
    }
    div.float_right
    {
        width:100px;
        float:right;
    }
</style>
<div class="float_left">Sample Text 1</div>
<div class="float_right">Sample Text 2</div>
Result
Sample Text 1
Sample Text 2

The example above is pretty straightforward. The float:left; simply means that when the “float” property is set to “left”, the element is aligned to the left. On the other hand, if the “float” property is set to “right”, the element is aligned to the right. We have only one big caution here. The div tag, if not specified, believes that it can take up the whole horizontal space. This is precisely why I define the “width” to “100px”. That pretty much sums up the display and float properties, and now we can move onto positioning.

References

If you enjoyed this resource, support me by sharing this page with others.
Share on Facebook
Facebook
Share on StumbleUpon
StumbleUpon
Digg this
Digg
Tweet about this on Twitter
Twitter
Share on Reddit
Reddit

Leave a Comment

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.