layout using position and float

[kaanta]

hi,
as i understand an element's alignment can be laid out using either position: absolute/relative etc(and specifying left/right) Or it can be done using float property as well.

can you suggest if there is a good read abt when to use what? when to use floats, and when to use position attribute?
thanks in advance.

[rtrethewey]

You're asking 'it depends' and 'right tool for the job' questions. It all depends on the design effects you want to achieve and the audience for the site. Personally, I think of position:absolute as a tool to use when I need individual elements to be displayed with a specific spacial relationship to each other. You can also, of course, use it to give a page a specific structure. Floats are handy for many things, but these days I see web designers more often relying on them to make their page layout more fluid/flexible in order to accommodate a wide variety of devices from laptops to smart phones and tablets. In the end, you always return to design and function and you use whatever it takes to get you the result you want. If the code is valid and you see what you wanted, it doesn't matter much how you did it. Good luck!

[Eye for Video]

Your (mis)understanding of the use of declared positioning is very common and often a real source of frustration for new Web designers.

an element's alignment can be laid out using either position: absolute/relative etc(and specifying left/right)

of and by itself, this statement is incomplete and will give unreliable results because it does not take into account the "Parent Rule".
For your review:

Using a declared position like absolute tells and browser to take that element out of the natural flow and do something different with it. So you've got the browser parsing in order from top to bottom, then throwing in some elements that are completely out of the flow.... they can be very hard to control, because there are special rules that apply to elements with declared positions.
The least under stood of those rules is what I call the "Parent Rule". Giving an element a declared position like relative or absolute can have huge differences in how that element is actually displayed depending on whether or not the PARENT of that element also has a declared position.
So a div which is position:absolute for example will display one way if it's parent also has a declared position and it will display in a completely different manner if it's parent does NOT have a declared position... to review:
If a div's parent container DOES NOT also have a declared position, the child <div> will do 1 of 2 things.
If position:relative, it will position as desired but space will be left as though that element was still in the natural flow. So you may move the 500 X 100 element down and over, but a 500 X 100 space will be left, as though it was still there.
If position:absolute, child is positioned relative to browser window and that position does not change even if window contracts or expands.
So be sure to give a declared position to both the parent and the child <div>.
Neglecting to follow this rule is the main reason why the use of declared positioning fails.

So while you can use declared positioning for general page layout, I would NOT recommend it. Declared positioning should be reserved for very special situations, like stacking one element over the top of another using z-indexing.
ALL general page layout can be done using CSS:
http://www.w3schools.com/css/css_intro.asp
http://www.w3schools.com/css/
Best wishes,
Eye for Video

[kaanta]

Thank you for replying and sharing this with me. I went through css tutorial on w3schools and saw this example that I was originally talking abt:

http://www.w3schools.com/css/css_align.asp
section: Left and Right Aligning Using the position Property
section: Left and Right Aligning Using the float Property

alignment can be done using position property or through float. When should one be used in favor of other? If position proerty is used keeping in mind parent rule, which alignment property(position vs float) should be used?

[Eye for Video]

Almost NEVER would you choose a declared position over positioning via CSS, which includes not only "float" but also padding and margin.
Review the CSS Box Model here:
http://www.w3schools.com/css/css_boxmodel.asp
In my experience with dozens of Web sites at any one time, I may use a declared position... maybe 5% of time... and then really only if I need to stack one element on top of another using z-indexing (which requires a declared position to work).
http://www.w3schools.com/cssref/pr_pos_z-index.asp
That is really the only situation where I use a declared position. ALL other layout is done with just CSS.
Best wishes,
Eye for Video

[kaanta]

thank you very much for your inputs. good start for a beginner like me.