#1
  1. No Profile Picture
    Contributing User
    Devshed Specialist (4000 - 4499 posts)

    Join Date
    Jul 2003
    Posts
    4,350
    Rep Power
    630

    Side by Side Tables Issue


    I have the following style set to put my tables side by side:
    Code:
    table {
    	float:left
    }
    That seems to work as desired. However, for some reason it also seems to apply to everything that follows. The structure I have is:
    Code:
    <div>
    <table>
       .
       .
       .
    </table>
    <table>
       .
       .
       .
    </table>
    </div>
    <div>
       .
       .
       .
    </div>
    The problem is that the 2nd div also starts adjacent to the tables. How do I "turn off" the table style and why does that style seem to apply to the 2nd div? TIA.
    There are 10 kinds of people in the world. Those that understand binary and those that don't.
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Dec 2003
    Posts
    721
    Rep Power
    444
    This is a common issue with floats. Essentially "float" says "have whatever comes after this wrap around it". To stop that, you have to "clear" the float. There are various ways to do that. One way would be to set "overflow: hidden" on the div containing the tables. This will make the div expand to enclose the floats, and since it's not floating, the stuff that comes after it won't wrap around it.

    Comments on this post

    • gw1500se agrees : It worked, thanks.
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Specialist (4000 - 4499 posts)

    Join Date
    Jul 2003
    Posts
    4,350
    Rep Power
    630
    Yep, that did it. Thanks! Sheesh, how would I ever have figured that out without you?
    There are 10 kinds of people in the world. Those that understand binary and those that don't.
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Specialist (4000 - 4499 posts)

    Join Date
    Jul 2003
    Posts
    4,350
    Rep Power
    630
    On a related issue, this proves CSS is black magic. The following works:
    Code:
    <div style="overflow:hidden">
    But the following does not:
    Code:
    .clearfloat {
       overflow:hidden;
    }
    Code:
    <div class="clearfloat">
    Why? TIA.
    There are 10 kinds of people in the world. Those that understand binary and those that don't.
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Dec 2003
    Posts
    721
    Rep Power
    444
    That should work. I'd have to see the page in action.
  10. #6
  11. No Profile Picture
    Contributing User
    Devshed Specialist (4000 - 4499 posts)

    Join Date
    Jul 2003
    Posts
    4,350
    Rep Power
    630
    I can PM you the url if you want. I assume you want it set up to use the CCS?
    There are 10 kinds of people in the world. Those that understand binary and those that don't.
  12. #7
  13. No Profile Picture
    Contributing User
    Devshed Specialist (4000 - 4499 posts)

    Join Date
    Jul 2003
    Posts
    4,350
    Rep Power
    630
    Never mind. I guess I must have used the right chant because for no known reason it just started working. Thanks again for the help.
    There are 10 kinds of people in the world. Those that understand binary and those that don't.

IMN logo majestic logo threadwatch logo seochat tools logo