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

Position and Alignment

Position is another CSS property that deals with alignment and organization of HTML elements. Generally partnered with the position property are the alignment properties: top, right, bottom, left. In a specific combination of position and alignment properties, you obtain the same styling that is used for the bottom footer of this page. Notice how it always seems to stick to the bottom even when you scroll down. That is because it is rendered to the window and not technically to the page.

CSS Position and Alignment Properties Values

  • absolute – stays where you tell it regardless of other objects
  • fixed – appended to window (moves when user scrolls)
  • relative – placed next its normal position
  • static – placed in its default position
Example
<style type="text/css">
    div.special
    {
        position:fixed;
        bottom:30px;
        background-color:#000;
        color:#fff;
    }
</style>
<div class="special">
    Sample Text
</div>
Result
Sample Text

The result box is rather useless on this particular example, but I’ll keep it anyway. We already understand the color and background-color properties. So, first we’ll discuss position. When set to fixed, the position properties tells the browser to join that to the window and not to the actual document. This allows a nice smooth element like a footer or a header to remain in the user’s view the entire time. Just as in important is the alignment property, which in this case is bottom. This property tells the browser where to join the fixed positioned element. I am not going to show the other properties, in an effort not to destroy my page layout so that you can still navigate. So, feel free to tinker around with them.

References

CSS Quiz

The Standard CSS Quiz

While HTML is the heart of the internet, CSS provides the beauty. This quiz was designed to test your technical knowledge of CSS and not the graphic design portion. After completing this quiz, you will get a sense of how well you know how to manipulate CSS properties and classes. If you score well, you should consider moving onto a real programming language like JavaScript that will allow you to do even more advanced web development.

Start The CSS Quiz

CSS Tests and Exams

As of now, we only provide a standard CSS quiz that is not intended to be a professional test. There might be the possibility to integrate a testing system into After Hours Programming, but we are not currently working towards that goal.