SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Guru Zygoma's Avatar
    Join Date
    May 2006
    Location
    York, Uk
    Posts
    916
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Will floating and positioning elements relatively break layout?

    Buon Giorno from Pitch black 9 degree C Wetherby UK,

    I'm in the midst of designing the layout of the header section of a website> Now so far Ive been positioning elements by floating & positioning relatively as illustrated here: http://i216.photobucket.com/albums/c...t-theory-1.jpg

    But something concerns me which is whether not positioning relatively and doing lots of floating will increase the chances of the laout breaking. So my question is please:
    "Does floating and positioning elements relatively increase the chances of the layout breaking of yes whats the alternative?"

    Thanks in advance,
    David
    I have had a perfectly wonderful
    evening, but this wasn't it-
    Julius "GROUCHO" Marx - 1890-1977
    http://www.davidclick.com

  2. #2
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,725
    Mentioned
    31 Post(s)
    Tagged
    0 Thread(s)
    It really depends on HOW it's done.

    CSS is nto really a LAYOUT LANGUAGE per say. So once more the answer is to THINK and GAUGE the specific code you have written.

    Some things you should know ( if you dont know already):

    1) positioning an element relatively may have an effect on descendant elements which have position: absolute, as it becomes the positioning context for all decedents until either another position:relative or position:absolute parent is created.

    2) relative positioning moves the element , but not the space it takes up.

    3) potentially you could achieve the same horizontal shift with margin

    4) Sometimes you will see float/position relative as a fix to IE issues ( but I tend to favour the idea of dont fix what isnt broken, so if your code doesnt exhibit IE bugs, I'd consider foregoing the position:relative fix)

    If your math is on target, and your code compliant your layout should not break ( whether you use floats/ or not).

    for example. if you floated two elements one 80% and one 200px wide contained in a full width div, your layout will break anytime your view port is less than 1000px! .8*1000 +200=1000 This not the result of bad code , just mathematics. So, if we can mathematically anticipate such situations we can put a caveat on the PARENT ELEMENT (min-width:1000px or even an media query) to prevent the situation.

    hope that sheds some light on the subject

  3. #3
    SitePoint Guru Zygoma's Avatar
    Join Date
    May 2006
    Location
    York, Uk
    Posts
    916
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Perfect Thank you :-)
    I have had a perfectly wonderful
    evening, but this wasn't it-
    Julius "GROUCHO" Marx - 1890-1977
    http://www.davidclick.com


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
  •