Whats the main difference between float and a position property (absolute,etc)

Hi,

I was under the impression that “floating” was just another position property but I apparently not. In other words I thought that that float was a position property like static, absolute, relative, fixed and inherit and it may be in fact that’s why I’m confused.

I always thought that you couldn’t use float and static, absolute or any of the other position properties together, but today I tried it and it actually works.

This is what I have…

<div id="main">
        <div id="logo">
            Logo goes here
        </div><!--logo ends here-->

         <div id="nav">
            Nav Goes here
        </div><!--nav ends here-->
</div><!--main ends here-->
#main{
    background-color:#CCC;
    width:300px;
    padding:20px;
    overflow:hidden;
    margin:20px 0;
    position:relative;
}

#logo{
    background-color:#eee;
    width:150px;
    height:200px;
    padding:5px;
    float:left;
    position:relative;
    top:10px;
}

#nav{
    background-color:#ddd;
    width:100px;
    padding:5px;
    float:left;
}

Look at #logo, its floated to the left and then relatively positioned.

Can someone explain the main difference between float and the position properties such as relative, absolute etc?

Is this a common practice that can be used without worries?

As I said I never thought this could be done, I thought an element should be either floated or positioned using one of the position properties but not both.

Thanks a lot.

While floating is used for positioning purposes, I would not say floating is a “type of positioning”; thinking that way might lead to some serious confusion.

Floating is… floating.

Floating does take an element out of the “normal flow” … and both “shrink wrap content”… both automatically become “display:block” ; they have those things in common with (absolute and fixed ) positioning, but that’s about it. Floated elements are in a sense in their own flow. They are actually MOVED and will inter act with each other and to a certain extent the regular flow of content ( the wrap around effect you see). Tho a floated element is out of the regular flow, you can use several methods to clear it so that it’s container doesn’t collapse, something which is not possible with AP or FP and ireelevant with RP.

There are MANY rules that apply to float behaviour:

  1. The element’s float-direction will always margin will the float-direction margin of it’s parent or come close as possible when interacting with other floats. EG, an element left margin will touch the left side of its container or the rightmost part of the previous floated elements left margin.

  2. Floats RISE ( see the pun?). w/o resorting to position or margin tricks you cant float something to the bottom of it’s container.

  3. Floats level. w/o resorting to position or margin tricks, no float will be higher ( in the container) than any other element that comes before it in the mark up. Try it. If you have a wrapper with several children and float the first child, that child element will float at the top of it s container BUT if you flat a middle element the child element will still be at the top and the floated element appear "side by side " the element that follows it in the code. Floating the last child will NOT cause ti to display aside any of its siblings. ( see #2) , it could however collapse the container, unless clearfix or overflow:hidden/auto is used.

  4. Floats interact. float two elements right., you’ll see the second element on the code will appear to the LEFT of the first (see #1), so the position of a floated element depends on other floated elements around it.

Am skimming over these COMPLEX rules, still they are VERY different from the behaviour of AP’ed and FP’ed elements.

Again for example.
The way an AP element is position has mostly to do with it’s LAST RP’ed container. An AP’ed or FP’ed element really doesn’t interact with any other elements.
Unlike floats, you can position element any relative distance from any direction. You CANT clear AP’ed or FP’ed elements.

Again I am skimming a very vast subject here. Still the point is that is is best NOT to view a floated elements as “a kind of positioned” element as the behavioural difference is just too great.

You can apply the two properties,. It is just not usually practical for any purpose ( you could float AND AP… for example … it would just act as an AP’ed element) and as you noticed you can RP a floated element as well.

As long as you remember that THE ACTUAL SPACE of the element remains where its originally located when you RP, it can be a really useful trick for centering or tweaking display position…or mixing units, depending on the visual situation. For example, you can move something to the left 3em with margin-left:-3em and then another 15px with position:relative; left :-15px;

It is important to note that margin-left:-15px IS NOT the same as position:relative; left :-15px; If there are no other visual cues it will appear to be exactly the same but if you have content surrounding the positioned element you will see that the element overlaps other content and and that a gap ( the space where the element used to be) is left.
If you keep all of these things in mind you can mix and mat all of these properties for a plethora of layout and positioning options.

Thanks a lot “dresden_phoenix” for the valuable information. That basically answers all of my questions.

I don’t know if I should be asking this question here but I need someone to clarify this for me. My previous post was removed because it read as follow…

“Thanks a lot for the good information!”

I don’t get it, now I’m afraid to thank people!

I love this forum and I feel like if I did something bad.