Float and then relative?

could I float a element and then position it relative?

I was confused because the tutorial I was following had float in the chapter for positioning elements and I know you can only choose 1 position such as: absolute, relative, static or fixed.

However, the question is: could I float and then make it relative, float and make it absolute, etc etc. Does floating something have anything to do with the “position?”

could I float a element and then position it relative?
Hi,
Yes you can, but remember that RP elements retain their original position in the page flow. The box is only moved visibly and not physically, it is best not to move it too much or there will be problems with adjoining elements. :wink:

That RP/Float is the same method that Paul uses for Equal Height Columns without using faux images.

float and make it absolute, etc
No, the absolute positioning would win out in that case and the computed value of the float will be “none”.

They are completely seperate. You can float and position:relative something. position:relative only positions an element relative to itself, meaning you can move it visually but not actually physically. Other elements will still think it’s there.

However, according to the specs (and this is true for every browser), if you float and then do position:absolute or position:fixed, then position:absolute/fixed will win out and you could basically just remove the float:left; declaration.

Same thing for the display property and floating/absolute(or fixed) positioning.

If you give display:inline-block and then a float:left; or position:absolute or fixed, then the display property will be ignored.

Hope that answers everything :slight_smile:

Making something both a float and position:relative would make sense if you are going to place content inside it using position:absolute as then the absolute positioned elements will be positioned relative to the floated element rather than the entire page.

great stuff answers everything… that bit about absolute and float–I wasn’t thinking clearly and was roughly just asking if float had anything to do with “position”… i guess it doesn’t… thanks again…

In short no :). But as I explained in my last post absolute/fixed will override it being floated.

I was asking this because: I had an element floated and to even it out with the div floated to the left of it I had to do: margin-top: -10px;

I didn’t like using negative for margin-top because it was giving me this strange overstretched red active dashed border when area is :active (it was a anchor with image inside)… so instead I wanted to use relative AND NOT “margin-top -10px” so this overstretched box wouldnt appear…

Post a link to the page in questionn, and where this is happening on the page and we will sort that out for you :).

I will when finished (maybe couple weeks)… it is just too damn embarrassing submitting my amateur stuff on such a pro site like sitepoint…

I don’t think anything you post could possibly embarrass us :). I have seen many sites and quite frankly nothing you post could be as “amateurish” as what I have seen in the past lol :).

it is just too embarrassing submitting my amateur stuff on such a pro site like sitepoint…

Hi,
We’re not here to embarrass anyone, were here to help you out if you have a problem somewhere. Just shout if you hit a snag.

We all wrote some really bad code when we first started out. :slight_smile:

If that was true, i would be posting absolutely nothing here :smiley:

cool… thanks for the support… i think i just might once i finalize some stuff…

Position: relative does only one thing useful - declares a new scope for position: absolute. You can use this to float an element, but the contents of the parent div will totally ignore the absolutely positioned element. This might not be a bad thing.

Try the following:


<div style="position: relative; height: 400px; width: 400px;">
	<div style="position: absolute; right: 0px; top:0px;">
		I'm in the upper right corner of parent div.
	</div>
</div>

Note that unlike a true float the absolutely positioned element doesn’t affect other elements in the parent div at all. It also won’t respond to clear: both; in any way. While this does prevent it from being used in some situations where a float is called for there are also many situations this approach is better than using a float.

Not the least of which is css positioning of this nature is less likely to bug out on IE 6, where float behaviors in IE have a lot of bugs.

I would have to disagree with that statement. While it is true that position:relative; is used to establish a containing block for AP children that is not the only thing it can be useful for.

Relative Positioning can be used for subtle shifts of an element. If you know what you are doing it can also be useful for making source ordered layouts where large shifts are made from one side of the page to the other.

Content first using relative positioning

It is something that newbies don’t need to be jumping into right away though. A common mistake that everyone new to css makes is that they want to set position:relative; on every div when they don’t fully understand how it works. There are times when it causes no problems at all but they need to understand when and where to use it rather than just using it blindly.

Absolute positioning should only be used for small chunks of a page where you intentionally want to remove the element from the page flow. If it has textual content in it then adjoining elements in the page flow should have a margin or padding buffer to preserve the AP element.

The advantage that floats have over AP blocks is that they naturally allow text to flow around them. They can be fine tuned into position with margins. As far as any IE float bugs, only IE6/7 are the ones that present any major problems these days and most all of the bugs have already been found and documented with workarounds provided.