css positioning elements

Positioning ElementsPrepared by: Sanjay Raval | http://www.usableweb.in/

http://www.usableweb.in/



Every element on the page is considered to be a rectangular box made up of the element’s content,padding, border, and margin

Padding is applied around the content area. If you add a background to an element, it will be applied to the area formed by the content and padding.

Border applies a line to the outside of the padded area. Outside the border is a margin.

* Margins are transparent and cannot be seen. * They are generally used to control the spacing between elements.

Box Model Recap

In CSS, width and height refer to the width and height of the content area. Adding padding, borders, and margins will not affect the size of the content area but will increase the overall size of an element’s box.

If you wanted a box 100-pixel wide with a 10-pixel margin and a 5-pixel padding on each sides, you would need to set the width of the content to be 70 pixels.

Box Model Recap

#myBox {margin:10px;padding:5px;width:70px;}

Box Model Recap

Padding, borders, and margins can be applied to all sides of an element or individual sides.Margins can also be given a negative value.

HTML elements are either block or inline elements.

Block and inline elements

A block-level box, such as a div, a paragraph, or a heading, begins rendering on a new line.

An inline-level box, such as a <span> or an <em>, begins rendering wherever you place it within the document and does not force any line breaks.

Using CSS property, display, you can make an inline element display like a block-level element or vice-versa.

Example:Say you want tabs, which is a list (of links) and so should be marked up as a <ul>


<ul id="maintabs"><li><a href="#">PersonalFinance</a></li><li><a href="#">BillPay</a></li><li><a href="#">FundsTransfer</a></li><li><a href="#">FinancialCalendar</a></li><li><a href="#">Customer Care</a></li><li></ul>

Here's how it looks as a normal list


#maintabs li {display:inline;list-style-type:none;float:left;background-color:#dce2c7;border:1px solid #c5d199;padding:5px 10px;margin-left:2px;}

Here's how it looks with the CSS styles applied

Here's the CSS code

Using CSS property display:inline, you can display a block element <li> as an inline element and can show the list items <li> as tabs.

A floated box can either be shifted to the left or the right until its outer edge touches the edge of itscontaining box, or another floated box.

Because floated boxes aren’t in the normal flow of the document, block boxes in the regular flow of thedocument behave as if the floated box wasn’t there.

As shown in below figure, when you float Box 1 to the right, it’s taken out of the flow of the documentand moved to the right until its right edge touches the right edge of the containing block.

Floating

If you float all three boxes to the left, Box 1 is shifted left until it touches its containing box, and the othertwo boxes are shifted left until they touch the preceding floated box.

Floating

If the containing block is too narrow for all of the floated elements to fit horizontally, the remaining floatswill drop down until there is sufficient space.

If the floated elements have different heights, it is possible for floats to get “stuck” on other floats whenthey drop down.

Floating

Lets say you have a grid of floated objects.

Clearing the floats

Then let’s say you want to create a break in that grid in order to start a new row.

There are times when you don’t want certain content to be next to floated elements. To accomplish this,you can use clear.

The clear has four options: "clear: left", "clear: right", "clear: both" or "clear: none".

Clearing the floats

clear: left The element is moved below the bottom outer edge of any left-floating boxes that resulted from elements earlier in the source document.

Clearing the floatsclear: right The element is moved below the bottom outer edge of any right-floating boxes that resulted from elements earlier in the source document.

clear: both The element is moved below all floating boxes of earlier elements in the source document.

Line boxes (text boxes) next to a floated box are shortened to make room for the floated box, and flowaround the float.

In fact, floats were created to allow text to flow around images

Line boxes and clearing

To stop line boxes flowing around the outside of a floated box, you need to apply a clear to that box.

The clear property can be left, right, both, or none, and indicates which side of the box should not be nextto a floated box. To accomplish this, enough space is added above the cleared element’s top margin to push the element’s top border edge vertically down, past the float

Line boxes and clearing

There are four values for the position property: static, absolute, fixed, and relative. Static is the default.

Unless specified, all boxes start life being positioned in the normal flow (static position)

let’s take a quick look at each using a simple example with four paragraphs.

The Position Property

Static PositioningWith the four paragraphs each displayed with the default position property value, static, they stack one above the other, as normal document flow dictates.


Relative PositioningLet’s set the third paragraph to the relative position.

You can then move this paragraph with respect to its default position using the properties top, left,bottom, and right.


p#specialpara {position:relative; top:30px; left:20px;}

Relative Positioning


Now the top of your paragraph is moved down by 30 pixels and right by 20 pixels.

Here although the element moves relative to its original position, nothing else changes.

Absolute PositioningThis type of positioning takes an element entirely out of the flow of the document.

Let’s modify the code you used for relative positioning by changing relative to absolute.


p#specialpara {position:absolute; top:30px; left:20px;}

Absolute Positioning


You can see that the space previously occupied by the element is gone. The absolutely-positioned element has become entirely independent of the surrounding elements in themarkup, and it is now positioned with respect to the top-level element, body.

Because the absolutely positioned element’s positioning context is body, the element moves when thepage is scrolled to retain its relationship to the body element, which also moves when the page scrolls.

Fixed PositioningFixed positioning is similar to absolute positioning, except that the element’s positioning context is the viewport (the browser window or the screen of a handheld device, for example).

So the element does not move when the page is scrolled.


Note: However, position:fixed does not work in IE6, although it does work in IE 7.

Positioning Contextcontextual positioning means that when you move an element using the properties top, left, right, orbottom, you are moving that element with respect to another element.That other element is known as its positioning context.

As you saw in “Absolute Positioning” earlier, the positioning context of an absolutely positioned elementis body—that is, unless you change it.

body is the containing element of all other elements in your markup, but you can use any ancestor element as a positioning context of another element by changing the ancestor’s position value to relative.


Positioning ContextLet’s look at this markup


<body><div id="outer">The outer div<div id="inner">This is some text...</div></div></body>

and this CSS

div#outer_div {width:250px; margin:50px 40px; border-top:3px solid red;}div#inner_div {top:10px; left:20px; background:#AAA;}

Positioning Context


But why isn’t the inner div 10 pixels down from the top of the outer one and 20 pixels to the left, asspecified?

The answer is that the inner div has the default positioning of static. This means it is in the regular document flow, and because the outer div has no content, the inner divstarts in the same place.

Only when you set an element to one of the other three positioning options—relative, absolute, orfixed—do the top, left, right, and bottom properties actually do anything.

Positioning Context


Let’s see this in action by setting the inner div’s position property to absolute.

div#outer_div {width:250px; margin:50px 40px; border-top:3px solid red;}div#inner_div {position:absolute; top:10px; left:20px; background:#AAA;}

Because there is no other relatively positioned element for it to reference, it positions itself by defaultwith respect to the body element.

Positioning Context


If you then set the position property of the outer div to relative, the positioning context of the absolutelypositioned inner div is now the outer div

If you now set the left and top position properties of the outer div to anything other than zero, the innerdiv would move to maintain its positioning relationship to the outer div—its positioning context. Get it?

There may be a case when an element's content might be larger than the amount of space allocated to it.

CSS provides a property called overflow which tells the browser what to do if the box's contents is largerthan the box itself.

Overflow Property

Example:Here's the HTML code

<body><div class=“myBox">This is some text...</div>This is some text... </body>

Here's the CSS code

Overflow Property

.myBox {float: left;width:150px;height:150px;background-color:#ccc;border: 1px solid #999;margin-right:5px;padding:5px;}

Here's how it looks:

Overflow has 4 values namely visible, auto, hidden, and scroll

Overflow Property

.myBox {overflow:visible;}

Overflow: visibleVisible is the default value. No scrollbars will be added, and your content will just flow.

Lets add some more text to the myBox div container and see how the text flows.

Overflow Property

.myBox {overflow:auto;}

Overflow: autoYou should use this value when you want to let the browser decide what’s right. Scroll down? Scroll right?No scrolling at all? The browser makes this decision. This value usually is the best choice.


Overflow Property

.myBox {overflow:hidden;}

Overflow: hiddenThis value will not add any scrollbars or will not display more text then needed. When the content crosses the ‘height’ given to the container, it simply don’t display that content.


Overflow Property

.myBox {overflow:scroll;}

Overflow: scrollAn overflow of scroll means that the browser should place scrollbars on the element whether or not the contents of the element have overflowed.

Ensure there is always enough content in this box, because otherwise there are ugly scrollbars for nothing!


Note: Theoretically, with the overflow property, the need for frames is greatly reduced. Unfortunately, some old browsers do not fully support the overflow property.

css positioning elements

Technology

outer div