Skip to main content

Intermediate and Advanced Tutorials

Tutorials on accomplishing tasks in CSS that generally require more advanced knowledge of the topic.

  • How to float items next to each other but aligned to the right

    Modified on: Thursday, August 25, 2016 - 15:25
    So you have a several elements as part of your well-formed and well-written website but your problem is that you want them to sit next to each other, but floated to the right? The solution for this depends on whether you're using inline or block elements. Let's have a look at some practical examples.
  • How to make an element stretch to fit its contents

    Modified on: Wednesday, August 24, 2016 - 14:52
    I've covered this topic in The Top 10 things you've always wanted to do in CSS, but felt I should write a dedicated tutorial on the subject because it's one of the main things people ask me.
  • How to combat float leakage

    Modified on: Thursday, August 25, 2016 - 15:33
    You've probably encountered the scenario at some point: you have a container block with automatic or percentage dimensions and an overflow:visible (the default value for overflow), and you have two elements inside the container, one of which is floated.
  • Horizontal menus and definite/fixed widths

    Modified on: Wednesday, August 24, 2016 - 13:18
    This tutorial explains how to create a horizontal menu with list items of a definite width.
  • Horizontal menus and automatic widths

    Modified on: Thursday, August 18, 2016 - 11:10
    This tutorial explains how to create a horizontal menu with list items that are the same width as the text they contain. In other words: a horizontal menu that contains list items that do not have a definite width, and contract or expand to fit their contents.
  • How to clear floats with the CSS clear property

    Modified on: Thursday, August 25, 2016 - 15:39
    The CSS clear property is used to clear floated block elements.
  • Styling list items with CSS

    Modified on: Thursday, August 18, 2016 - 11:07
    This tutorial will show you how to style your lists with CSS. We will cover simple positioning, changing the bullet point style and using an image as a bullet point.
  • The CSS way to style margins and padding

    Modified on: Thursday, August 18, 2016 - 11:07
    When you want to add space between elements in your document, don't use empty p tags or br tags. There's no point, when creating space is something CSS can do easily using the CSS properties margin and padding.