SitePoint Sponsor

User Tag List

Results 1 to 15 of 15
  1. #1
    SitePoint Zealot SirFrigglesworth's Avatar
    Join Date
    Aug 2009
    Location
    Chicago, IL
    Posts
    158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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?"
    "Death smiles at us all. All a man can do is smile
    back."

    -Gladiator

  2. #2
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    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.

    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".

  3. #3
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    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
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  4. #4
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,789
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    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.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  5. #5
    SitePoint Zealot SirFrigglesworth's Avatar
    Join Date
    Aug 2009
    Location
    Chicago, IL
    Posts
    158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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...
    "Death smiles at us all. All a man can do is smile
    back."

    -Gladiator

  6. #6
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by SirFrigglesworth View Post
    -I wasn't thinking clearly and was roughly just asking if float had anything to do with "position".
    In short no . But as I explained in my last post absolute/fixed will override it being floated.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  7. #7
    SitePoint Zealot SirFrigglesworth's Avatar
    Join Date
    Aug 2009
    Location
    Chicago, IL
    Posts
    158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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...
    "Death smiles at us all. All a man can do is smile
    back."

    -Gladiator

  8. #8
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Post a link to the page in questionn, and where this is happening on the page and we will sort that out for you .
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  9. #9
    SitePoint Zealot SirFrigglesworth's Avatar
    Join Date
    Aug 2009
    Location
    Chicago, IL
    Posts
    158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I will when finished (maybe couple weeks)... it is just too damn embarrassing submitting my amateur stuff on such a pro site like sitepoint...
    "Death smiles at us all. All a man can do is smile
    back."

    -Gladiator

  10. #10
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    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 .
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  11. #11
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    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.

  12. #12
    SitePoint Guru Luki_be's Avatar
    Join Date
    Jun 2008
    Location
    Brazil, Minas Gerais. But i'm from Belgium.
    Posts
    867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by SirFrigglesworth View Post
    ... it is just too damn embarrassing submitting my amateur stuff on such a pro site like sitepoint...
    If that was true, i would be posting absolutely nothing here
    SitePoint Guru
    Sitepoint - the ultimate Css well
    As a computer, I find your faith in technology amusing.
    Sitepoint reference, your friend in need

  13. #13
    SitePoint Zealot SirFrigglesworth's Avatar
    Join Date
    Aug 2009
    Location
    Chicago, IL
    Posts
    158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    cool... thanks for the support... i think i just might once i finalize some stuff...
    "Death smiles at us all. All a man can do is smile
    back."

    -Gladiator

  14. #14
    I solve practical problems. bronze trophy
    Michael Morris's Avatar
    Join Date
    Jan 2008
    Location
    Knoxville TN
    Posts
    2,023
    Mentioned
    63 Post(s)
    Tagged
    0 Thread(s)
    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:

    HTML Code:
    <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.

  15. #15
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Michael Morris View Post
    Position: relative does only one thing useful - declares a new scope for position: absolute.
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •