CSS Layout- the tricks of the trade

The <display> property is the most important tool in your web layout arsenal. The most common two types of display are block and inline.

first is the standard block level element.

<div> <p> <form> are common tags to denote a block element that flows from left to right across the width of the page.

next is the inline element.

<a> is the most common since it is used for links

<span> is used for wrapping text inside a paragraph without disrupting its flow.

margin settings.

you can set the width of the margin either literally by defining pixel count, i.e. 600px, or you can set it to a percentage. you can also use the max-width setting to force the margins to stay in a set range regardless of the size of the browser window.

the box model.

The border-box is the main feature used in displaying text and images on websites. Its size is correlated to a number of factors; width, padding, margin and border width all combine to make-up your final box size. There are shortcuts to acheive your desired results and one of them is the fairly new border-box command. This can be utilised to ensure your designs retain consistency across multiple sizes and browsers.


there are 4 main postion settings in css.

static- this is the default value and simply sits where it is without relation to other objects.

relative- relative is used when you want an object to be placed somewhere in an exact position that is determined by top, right, bottom, and left values that be denoted in pixels or percentages.

fixed- a fixed object behaves as if it is glued to one point on the screen even as the page is scrolled up and down.

absolute- an absolute object is always placed at the some point in direct relation to its parent object.


float is a command that is used to wrap text around images


clear is used to alter a previous positional statement to move floated items in any direction.


media-queries are a way to tell the browser exactly how you want your content to be displayed regardless of screen real estate or window size. by using a media-query command and specifying the exact maximum pixel width you want your object to be sized at you can ensure your object will be the displayed the way you want


inline block is a way to create a grid of boxes the will automatically fill the the screen in an orderly manner. It can also be used for layouts.


columns are a way to squeeze multiple lines of text into one block. the column count and spacing can be easily set by entering a handful of variable into the program


flexbox is a fairly new command tool that can be used for just centering items in a box or for doing full layouts.

A single golf clap? Or a long standing ovation?

By clapping more or less, you can signal to us which stories really stand out.