Orlando Web Design: CSS Page Layout – Understanding CSS Positioning

web design orlando lesson 6

Orlando Web Design & Development

CSS Page Layout: Understanding CSS Positioning

There are 3 ways of creating CSS layouts:

  1. Using floats & margins
  2. Using absolute positioning
  3. Using relative positioning

So, what technique should you use? Without a doubt the easiest & cleanest way to create a layout is using floats & margins.

Using floats and margins requires less code than using relative and absolute positioning and this technique also takes advantage of the cascading properties of CSS.

One layout 3 techniques:

Let’s take a simple HTML page like this:

web design before

And change the layout like the image below using:

  1. Floats & margins
  2. Absolute positioning
  3. Relative positioning

web design after

1. CSS Page layout using floats & margins:

css layout using floats & margins

2. CSS Page layout using absolute positioning:

css layout absolute positioning

2. CSS Page layout using relative positioning:

css layout using relative positioning

Category: Orlando Web Design Tags: , , No Comments
Orlando WordPress Developers

WordPress Plugin ACF 5.0. is now Compatible with Gutenberg!

Orlando WordPress Developer With Gutenberg's release just around the corner, we all want to make sure our WordPress web... Read More »

WordPress Coding Standards 1.1.0 are Now Available

Orlando WordPress Developer If you are a WordPress Developer, one of the major challenges in today’s development univ... Read More »
Orlando Web Design Company

How To Choose An Orlando Web Design Company

Orlando Web Design Company Choosing the best Orlando website design company for your businesses can be difficult. Shoul... Read More »