Thread: float question

    #1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2003
    Posts
    37
    Rep Power
    15

    float question


    I'm having a bit of a problem and I'm hoping someone can help me out. I thought that if

    #styleOne {
    float: none;
    }

    and

    <div id="styleOne">Text text or whatevah</div>

    was specified, that the next <div> element would have to go on the following line. In IE, this is what happens. But in Mozilla, the next <div> tag floats along after on the same line, if there's room.

    How do I get around this? It's driving me batty. Thanks!
  2. #2
  3. How may I help?
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2003
    Location
    At a crossroads where hacked and standard code meet.
    Posts
    445
    Rep Power
    26

    Cool


    Try this instead:
    Code:
    #styleOne
    {
     clear: both;
     display: block
    }
    Hope it works!
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2003
    Posts
    37
    Rep Power
    15
    thanks for the reply.

    nope, that didn't work.

    let me clarify a little - regardless of what's in the styleOne div, i want whatever to come after it to be on the following line. i was able to do this easily with tables, but i'm trying to go 100% CSS.
    Last edited by yeah-yeah; January 13th, 2004 at 07:37 PM.
  6. #4
  7. How may I help?
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2003
    Location
    At a crossroads where hacked and standard code meet.
    Posts
    445
    Rep Power
    26

    Exclamation Sounds like a bug.


    Sounds like Mozilla is displaying <div>s as inline elements. <span> should display as inline, but <div> should display as a block. Try this:
    Code:
    div
    {
     clear: right;
     display: block
    }
    If that doesn't work, Mozilla is probably Bugzilla.
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2003
    Posts
    37
    Rep Power
    15
    nope, that doesn't work either. could it be something else that's causing the problem? here's a snippet from the page i'm working on:

    styles:

    #centerContent {
    width: 620px;
    float: left;
    background: #505050;
    padding-top: 13px;
    padding-bottom: 13px;
    padding-left: 8px;
    padding-right: 8px;
    }

    #entry {
    width: 620px;
    margin-top: 13px;
    margin-bottom: 13px;
    clear: right;
    display: block;
    }

    web page snippet:

    <div id="centerContent">

    <div id="entry">
    <img src=imgs/img.jpg align="right">
    text text text text text text text text text text text text text text text text text text text text
    </div>

    <br />
    <hr width=80px size=1px color="white">
    <br />

    <div id="entry">
    <img src=imgs/img.jpg align="left">
    text text text text text text text text text text text text text text text text text text text text
    </div>

    </div>


    if there isn't that much text, the second entry div wraps around the first picture instead of coming on the following line. are nested divs causing problems? thanks for the suggestions
    Last edited by yeah-yeah; January 13th, 2004 at 08:07 PM.
  10. #6
  11. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2003
    Posts
    37
    Rep Power
    15
    figured it out! i was on the right track about the nested divs. there's a container div (id="centerContent") that has a number of divs inside it (id="entry"). there's a small line between each entry that's used as a separator. the separators were in the container div and not in the entry divs, so the suggested code wasn't affecting them. once i put them in their own divs, everything worked fine. thanks for your suggestion!
  12. #7
  13. |<.+#f@#+.&.|
    Devshed Frequenter (2500 - 2999 posts)

    Join Date
    Mar 2002
    Location
    norway
    Posts
    2,999
    Rep Power
    1226
    just one note,
    you have used the same id on more than one element,
    id is unique and can only be used once in a dodcument.

    you could use class instead ie

    .entry {some style}

    <div class="entry">

    http://www.w3.org/TR/html401/struct/global.html#h-7.5.2
  14. #8
  15. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2003
    Posts
    37
    Rep Power
    15
    thanks for the heads up. baby steps. i'll be compliant eventually.
  16. #9
  17. How may I help?
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2003
    Location
    At a crossroads where hacked and standard code meet.
    Posts
    445
    Rep Power
    26
    What? I use the same id all the time for different elements and it doesn't cause a display error.
  18. #10
  19. Thanks Johnny Hart (BC) R.I.P.

    Join Date
    May 2003
    Location
    Dallas
    Posts
    5,262
    Rep Power
    1959
    Originally posted by csshacker
    What? I use the same id all the time for different elements and it doesn't cause a display error.
    It will when you try to address an element by its id.
    Code:
    somevar = document.getElementById['someid'].value;
    
    or
    
    document.images['someid'].src = 'mypic.png';
    cheers,

    gary
    There are those who manage to build a web site without knowing what they're doing; thereby proving to themselves they do, indeed, know what they're doing.

    My html and css workshop, demos and tutorials.
    Ask a better question, get a better answer.
  20. #11
  21. How may I help?
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2003
    Location
    At a crossroads where hacked and standard code meet.
    Posts
    445
    Rep Power
    26
    Oh. Well, I have my own routines that scan the page elements checking for a particular ID, and it they work just fine.

IMN logo majestic logo threadwatch logo seochat tools logo