tags:

views:

524

answers:

8

Why Float is better than position:relative and absolute while we can make layout quickly with position? and in this recession time, time is very important.

when we make 2-col, 3-col or multi-col layout and then position other elements in layout divs.

Most of the world favor in Float . Why Float is better than position:relative and position:absolute to give position any element in <body> and other nested elements?

If using position: to layout a page/design, we can create a container div which is set to position:relative, allowing header, content and nav divs inside the container div to be set to position:relative, allowing these divs to be positioned relative to the container div.

and with positioning we can keep "maincontent" first and "leftsidebar" second in source order which is good for SEO.

please explain things with example demo page.

+1  A: 

we use float as absolute positioning does not work for variable height columns.

When you specify position:absolute, the element is removed from the document and placed exactly where you tell it to go

If you specify position:relative, then you can use top or bottom, and left or right to move the element relative to where it would normally occur in the document.

Source: http://www.barelyfitz.com/screencast/html-training/css/positioning/

Adeel
Absolute positioning does work for variable height columns, as long as the parent has relative positioning.
Tom
will the relative positioned div content be not overwritten by absolute positioned div?
Adeel
+2  A: 

Float is not better than Position, and Position is not better than Float - both should be used in the correct situation. I would recommend you read the book http://www.transcendingcss.com/ if you want to learn more about when to use which one, and CSS styling in general.

See here for an example: http://transcendingcss.com/blog/about/changingman_layout_updated/

Frozenskys
i've already read this book and see this article http://www.wardontheweb.com/float-vs-position-in-layout-my-gripe-with-andy-clarke/
metal-gear-solid
That article you link to proves my point perfectly - it's all down to the personal preference of the designer/coder - there is no right or wrong answer - there are just ones that work and ones that don't :)
Frozenskys
+1  A: 

i agree with Frozenskys, neither are actually better but float keeps the element within the document flow while position removes the element from the document flow, so i've found float works better across more browsers and my IE specific CSS is smaller when i use float

pixeltocode
A: 

Depending on your purposes, it may be better or worse. The good side is that it doesn't change the positioning mechanism. The bad side is that you can't do some tricks (i.e. element overlapping) with it. Float is only good for attaching an element to either edge of a parent element.

Kerido
+1  A: 

Absolute : your element is positioned to the first parent element with a position other than static (it must be explicit, even if the default position is relative)

Relative : your element is positioned to its last sibling with a relative position

Float : for instance if it's left, your element will move as far as it can to the left (depending on other element and its width, the elements before won't be affected, the elements after will flow around it.

Ref:

http://www.w3schools.com/css/css_positioning.asp

http://www.w3schools.com/css/css_float.asp

remi bourgarel
and float is also like position:relative.
metal-gear-solid
It's two things absolutely different, one is positioning and the other is floating. Don't mix everything.
remi bourgarel
+1  A: 

As mentioned above, it’s not a general better/worse issue, but:

Absolute positioning removes an element from the document’s flow. The element given absolute positioning will no longer affect the layout of other elements in the document.

As such, it’s usually not the right choice for doing an entire page layout unless you know what the width and height of all your content is going to be.

Paul D. Waite
so if we know width and height and content not going to be changed then no problem using position
metal-gear-solid
Pretty much. Your question is a bit general. It’s a bit like asking: “Which is better? `margin` or `text-indent`”? It depends what you’re trying to do.
Paul D. Waite
+3  A: 

Absolute positioning takes the element out of the normal document flow. Any absolutely positioned element is completely ignored when regarding normal elements.

This breaks in a lot of scenarios. The main one that springs to mind is putting elements underneath each other. With your column example, sure you can absolutely position 3 columns, but you can't put anything below that on the page, because the flow is still at the top of the page. The "absolute" elements do not affect where later content comes.

With floats, you just put an element afterwards and it wraps around or underneath the floating ones.

That's not to say it has no use. Positioning is very useful when you want to pop up a "layer" over the web page.


A short example... take this common HTML scenario:

<h2>Section title</h2>
<div class="column1">First</div>
<div class="column2">Second</div>
<div class="column3">Third</div>

<h2>Second section title</h2>
...

With floats, you'd use this CSS:

.column1, .column2, .column3 {
  float: left;
  width: 200px;
}
h2 {
  clear: both;
}

And everything would be fine. Let's absolutely position the columns instead:

.column1, .column2, .column3 {
  position: absolute;
  width: 200px;
  top: 30px; /* enough to miss the first h2 */
}
.column1 {
  left: 0;
  background: pink;
}
.column2 {
  left: 200px;
  background: lightgreen;
}
.column3 {
  left: 400px;
  background: lightblue;
}

Try this for yourself (with more content in each column) and see what happens to the second heading - it will always be right under the first one, as if the columns aren't there. Actually, the second heading would be mostly hidden by the columns since they're layered over the top of the document.

Unless the columns are fixed height then it is impossible to know where to put that heading below the columns. It's even worse if you want more columns under each heading.

Honestly, just give it a try and attempt a nice layout using absolute positioning. You'll soon understand its failings.

DisgruntledGoat
can u explain ur answer with live example
metal-gear-solid
@Jit: example posted, give it a try.
DisgruntledGoat
but you are using position:absolute for column put all html code in <div id="container"> and give position:relative to #container
metal-gear-solid
@Jit: Not sure I understand you. Wrapping the HTML in that code does absolutely nothing, you still can't put content below the columns. Like I and others have stated, absolute positioning takes the element out of the normal document flow (even if it has a relative parent), so all content that isn't in those columns acts as if the columns aren't there at all.
DisgruntledGoat
+1  A: 

float will not break the document flow -- also, it will position any element it uses the best it can fit in the container width -- say I have 5 x 200px divs in a 800px width container, the last 5th will go in a "new line" below the other ones -- using position:relative will make you need to calculate when it needs to break yourself, and it won't break correctly since the display will either be block and go over the whole width or it will be inline-block or inline which won't render the same way for divs as block would and would pretty much mess up the document flow & layout.

It depends on what you want to do: position:relative is used to move the element a bit aside from it's natural location, whereas float will make it pop to the left-most or right-most position in the parent element. position:absolute will let you position it relatively to the whole html document.

henasraf