SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    Super Ninja Monkey Travis's Avatar
    Join Date
    Dec 2001
    Location
    Sioux City, Iowa
    Posts
    691
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Float goes below content

    On http://amaranth.mine.nu/css/ I have floated the right <div> but it goes below the left one. If I float the left one or move the right one above the left in the HTML it works fine. This seems like it would be really simple but I'e never figured it out. Any ideas?
    Travis Watkins - Hyperactive Coder
    My Blog: Realist Anew
    Projects: Alacarte - Gnome Menu Editor

  2. #2
    SitePoint Enthusiast Gamblingharry's Avatar
    Join Date
    Apr 2003
    Location
    UK
    Posts
    83
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thats how floats work, you need to put it before the content you want to the side of it. If you put it after it will just go below the last block element.

  3. #3
    Beer Monster -Ox's Avatar
    Join Date
    Apr 2003
    Location
    sowth afreeka
    Posts
    374
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think that the better wya to do it might be to use float:left; in your left div and float: right; in you right div, then perhaps try using display: inline;

    try that and see if it helps
    My postings are a natural product.
    The slight variations in spelling and grammar enhance its
    individual character and beauty and in no way are to be
    considered flaws or defects - http://www.guinnesspig.net

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    then perhaps try using display: inline
    Sorry but that's not the way to do it (I sound like punch & judy don't I )

    Gambling Harry was exactly right. Floats will float as far and as high as they can unless there is content in the way. They will not float up over content.

    Therefore content that needs to wrap around a float must follow the float.

    So all that was needed in your example was to move the elements in your html around.

    Quite simple really and obvious once you think about it
    Code:
    <body>
     <div id="right">
      Test
     </div>
     <div id="left">
      Foobar
     </div>
    Paul

  5. #5
    Super Ninja Monkey Travis's Avatar
    Join Date
    Dec 2001
    Location
    Sioux City, Iowa
    Posts
    691
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah, I knew it worked like that but I was hoping I didn't have to. Oh well, I guess I'll have to toss a "Skip Nav" link in there and be done with it.
    Travis Watkins - Hyperactive Coder
    My Blog: Realist Anew
    Projects: Alacarte - Gnome Menu Editor

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Well it all depends what comes next doesn't it ?

    If your nav is to be down the left or down the right then I usually place it absolutely and then clear it with margins for the main content.

    That way the content comes first in the html and the nav can go right at the end. Of course it does depend what else you want to follow etc.

    If you float it then the order has to be correct in the html for it to work.

    Paul


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
  •