Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    Jul 2007
    Posts
    50
    Thanks
    0
    Thanked 0 Times in 0 Posts

    display: inline issues

    I am trying to create 3 tables which i would like to display side by side. Here is the code for this:

    <div id="rankingsLeaders">
    <div id="normalTable">
    <table id="normal">
    stuff
    </table>
    </div>

    <div id="normalTable">
    <table id="normal">
    stuff
    </table>
    </div>

    <div id="normalTable">
    <table id="normal">
    stuff
    </table>
    </div>
    </div>

    To do this, i am trying to use the display inline attribute shown in the following css segment:

    div#rankingsLeaders {
    position: absolute;
    top: 50px;
    left: 0px;
    padding: 5px 10px 0px 10px;
    }
    div#normalTable {
    display: inline;
    }
    table#normal {
    border: 1px solid #353535;
    padding: 0px;
    margin: 5px;
    top: 0px;
    }

    But for some reason, they still don't display inline. Instead they show up vertically, one after the other. How can i make them show up side by side. Any help would be appreciated. Thank You.

  • #2
    Regular Coder Jutlander's Avatar
    Join Date
    Jun 2007
    Location
    In my own sick little world :P
    Posts
    425
    Thanks
    1
    Thanked 12 Times in 12 Posts
    You need to float them left:

    Code:
    div#normalTable {
    float: left;
    margin-right: 10px;
    }
    Switch that out with what you have.
    .
    .

  • #3
    New Coder
    Join Date
    Jul 2007
    Posts
    50
    Thanks
    0
    Thanked 0 Times in 0 Posts
    perfect! thank you

  • #4
    Senior Coder ahallicks's Avatar
    Join Date
    May 2006
    Location
    Lancaster, UK
    Posts
    1,134
    Thanks
    1
    Thanked 57 Times in 55 Posts
    You shouldn't be using multiple id's either. If you are going to duplicate a style put it in a class. Class is a group, an id is singular, can only be used once.
    "write it for FireFox then hack it for IE."
    Quote Originally Posted by Mhtml View Post
    Domains are like women - all the good ones are taken unless you want one from some foreign country.
    Reputation is your friend

    Development & SEO Tools

  • #5
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    All those <div>s around the tables are not needed either as you can just float the tables.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #6
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,338
    Thanks
    29
    Thanked 282 Times in 276 Posts
    Quote Originally Posted by mxb7642 View Post
    But for some reason, they still don't display inline. Instead they show up vertically, one after the other. How can i make them show up side by side.
    There’s a special method for creating inline tables that was introduced in CSS2.1; you use the declaration display: inline-table. Current versions of Firefox and Internet Explorer don’t support it. Opera 9, Safari 3 (beta), and Firefox 3 (alpha) do support it.

    Thus, you need to use floats if you want multiple tables on the same line.
    For every complex problem, there is an answer that is clear, simple, and wrong.


  •  

    Posting Permissions

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