HTML.co.uk

Two models float and position

On the WebPages, there are 2 models for positioning the content. Both the models are valid and it is always best to use two models to layout the WebPages with CSS.

Float

Float takes out the element from the normal flow of the WebPages and has many other elements around it. It is seems confusing to use CSS for layout at first but is can satisfy you once it is completely understood.

Position

When people think of CSS positioning, position is the one that is thought by everyone. This defines whether the element is in fixed, absolute, relative or static position.

CSS Position Properties

As it is mentioned above, if you have decided to position the pages within the position property, you need to use at least one of the style properties in order to define where the elements should be placed.

Bottom

The element should be placed at the location up from bottom of the browser. One thing that is to be noted is, if the negative values are used in these positions, you have to move the elements in opposite location.

Left

The element can be placed over from the right side of the window.

Right

The element can be placed from right side of the window.

Top

The element can be placed down from top of the window.

CSS Positioning – it is not Really Alignment

There were no many ways to position the items on the screen when HTML came first. Few of them were the align attribute that allowed to position the element related to its current position. In favor of the style sheets, the attribute has been deprecated. There are two attributes and among that, only one works for the text.

Text-align

This does all the things that you would expect from an align-attribute. It helps you to align the text to center, right and even justify. However, this works only with the text.

Vertical-align

This allows you to align the inline element to baseline top, bottom, middle and many other positions.

Position the Things on Top one after another

When positioning the elements, there are some chances that one element will overlap another. On the normal course of events, browser will put up the thing that comes first at the bottom. However, with Z-index property, you will be able to push the elements to other location

Z-index

This defines the stack order of the elements.

After positioning, give shape to elements

In order to define the shape of the elements, there are two properties. The content in the element is clipped so that it fits the shape.

Clip

Shape of the element is defined by clip. Usually, this amounts to height and width of the rectangle. If the content is longer, then it will be clipped.

Overflow

This tells the browser that, what should be done if the content is not fitted in the area that is clipped. The content can be hidden and it can be continued as usual.

Outline property of the CSS is a confusing property. When this property is learned first, it is hard to understand how the CSS Outline property is even remotely different from border property. WWW explains that it has the following differences.

• Space is not utilized by Outlines
• Outlines can be non-rectangular as well.

Outlines don’t take up space

The above statement is confusing. Just think that how objects in the webpage cannot take the space on WebPages. The outline property does not take the space because it will always be placed on top of the element’s box.
Around an element, if an outline is placed, it does not have any kind of effect on how the elements are placed on the page. It will not change the position or size of the element. If the outline is put on the element, it will surely take the exact amount of the space, as it did not have any outline on the element. In the border’s case, this is not true. On an element, a border is added on the height and outside width of the element. Therefore, if there were 50-pixel wide along with a 2-pixel border, then it would take 54-pixels. The same image along with 2-pixel outline will take only 50-pixels width on the same page and the outline will display the images outside edge.

Outlines May or may not be Non-Rectangular

Whenever you put up the border on the element, the browser will interpret the elements as if they were one of the giant rectangular boxes. If the box is split over many lines, the browser will just leave the edges open, as the box is not closed. It is as if a browser is seeing the border along with a wide screen, which is too wide to be measured. The wide screen is wide enough for the border to be continuous rectangle.
In contrast, the edges are taken into consideration by the outline property. If the outlined element is spanned over several lines then the outline will close at the line’s end and again re-opens on the next line. If it were possible, then the outline would definitely stay fully connected and thus it creates a non-rectangular shape.
The outline property must be seen and it must be compared with the border property.

Uses of the Outline Property

Searching the items is the best use of the outline property. Most of the websites will do this using a background colour. However, the outline property can also be used and you need not worry about adding the extra spacing on the pages.
Outline colour property will accept the term ‘invert’ that will make the outline colour the inverse colour of current background. This will allow you to highlight the elements on the dynamic WebPages even without the need to know what are the colours used.
Around the active links, there would be some dotted lines and to remove them the outline property can be used.