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

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

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

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

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

• CSS Display Property Reference (SitePoint)
• CSS Display Compatibility (QuirksMode)
• CSS Float Property Explained
• More About the CSS Float Property (SmashingMagazine)