This is the first post in a short series on how to use Cascading Style Sheets to control the layout of HTML web pages. To get the most out of this series, you should already know some basic HTML & CSS, which you will find in the HTML & CSS Day Course. CSS Positioning is [...]
Entries Tagged as 'CSS Positioning'
CSS Positioning Intro Part 1: Why use CSS Positioning?
August 11th, 2009 No Comments
Tags: CSS Positioning
CSS Positioning Intro Part 2: The Box Model
August 11th, 2009 No Comments
Before leaping straight into how to use CSS to control your page layouts, we first need to have a closer look at how an HTML page is constructed. I'm talking about something called the "HTML box model". Sound intimidating? Its actually ridiculously simple. Understanding the box model is both essential to everything else that follows [...]
Tags: CSS Positioning
CSS Positioning Intro Part 3: The DIV tag
August 11th, 2009 No Comments
In the previous post, we looked at how an HTML page structure could be expressed as a series of boxes. In this post I want to show you a new HTML tag that is used a lot in CSS Positioning: The div tag. CSS Positioning at its simplest, consists of two tasks: Use html to [...]
Tags: CSS Positioning
CSS Positioning Intro Part 4: Width and Background Colour
August 11th, 2009 Comments Off
In this post we are finally going to do some CSS positioning. We will start by creating a simple page that looks like this: OK – very simple layout indeed! But we are starting with basics here. Soon things will get more complicated. For the moment, what we are trying to achieve is to have [...]
Tags: CSS Positioning
CSS Positioning Intro Part 5: Margins and Padding
August 11th, 2009 No Comments
In the previous post you learned the bare bones basics of how to specify the width of an element. It did not look great. For one thing, the text looked uncomfortably squashed right up to the edge of each box. Lets insert some breathing space for the text. We will also complicate things a bit [...]
Tags: CSS Positioning · margin · padding
CSS Positioning Intro Part 6: Calculating Columns
August 11th, 2009 Comments Off
This series has covered some of the CSS properties that control the layout of a page. We looked at how to set the width of a page element and how to set margins and padding to create space between page elements. But so far we can only set up the most basic of layouts – [...]
Tags: columns · CSS Positioning
CSS Positioning Intro Part 7: Float and Clear
August 11th, 2009 Comments Off
This is the last post in the "Introduction to CSS Positioning" series. We look at two new properties that will help us create layouts with columns: "float" and "clear". You can download the files used in this exercise here. The Float Property Floats take a bit of getting used to. They are counter-intuitive and can [...]
Tags: clear · CSS Positioning · float
