CODEWITHSUNDEEP
htmlcss
sys_debug
sys_debug

Reputation: 4003

table not showing properly inside div html

I have this problem with a table inside a div. I created two tables and the goal was to have them next to each other. It ended up one below the other. tried to play with CSS as much as I can, but I am not that experienced with it. The code is here:

#contactdetails_table{
    width: 500px;
    height: 190px;
/*  border: solid #234b7c 3px; */
    background-color: #FFC3CE;
    border-radius: 15px;
    direction: rtl;
    float: left;
    color: white;
    font-size: large;
    position: relative;
    overflow: scroll;
}

and this is the code for second table that manages to go below the current one:

<table style="position:relative; float:left;" cellpadding="10" cellspacing="10">
                            <tr>
                                <td>الايميل:</td>
                                <td><?php echo $profiledetails->email; ?></td>
                            </tr>
                            <tr>
                                <td>المدينة:</td>
                                <td><?php echo $profiledetails->city; ?></td>
                            </tr>
                            <tr>
                                <td>الهاتف:</td>
                                <td><?php echo $profiledetails->telephone; ?></td>
                            </tr>
                            <tr>

                            </tr>
                        </table>

Thanks for help :)

NOte: included the first table:

<div id="contactdetails_table">
                            <table  cellpadding="10" cellspacing="10" >
                            <tr>
                                <td>الاسم الكامل:</td>
                                <td><?php echo $profiledetails->fullname; ?></td>
                            </tr>
                            <tr>
                                <td>اسم المستخدم:</td>
                                <td><?php echo $profiledetails->username; ?></td>

                            </tr>

                            <tr>
                                <td>الجوال:</td>
                                <td><?php echo $profiledetails->mobile; ?></td>
                                                            </tr>

                            <tr>
                                <td>العنوان:</td>
                                <td><?php echo $profiledetails->address; ?></td>
                            </tr>
                        </table>

                        <table style="position:relative; float:left;" cellpadding="10" cellspacing="10">
                            <tr>
                                <td>الايميل:</td>
                                <td><?php echo $profiledetails->email; ?></td>
                            </tr>
                            <tr>
                                <td>المدينة:</td>
                                <td><?php echo $profiledetails->city; ?></td>
                            </tr>
                            <tr>
                                <td>الهاتف:</td>
                                <td><?php echo $profiledetails->telephone; ?></td>
                            </tr>
                            <tr>

                            </tr>
                        </table>

Upvotes: 0

Views: 5872

Answers (3)

user1889992
user1889992

Reputation: 375

Make sure there is also no height property on the outer div (parent). If the contents are longer than the outer div, they should portrude out until height is removed. This happened to me more than once.

Upvotes: 1

theWizardsBaker
theWizardsBaker

Reputation: 104

Tables, by default, display as block elements (hence why they stack on top of one another).

You could try displaying all tables within #contactdetails_table as inline-block elements.

Something like

#contactdetails_table table{

    /* display as inline elements */
    display: inline-block;
    /* this will push the tables to the top of the div */
    vertical-align:top;

}

For IE 7 and below you should use a stylesheet with 

      display: inline;
      zoom:1;

Upvotes: 0

Schleis
Schleis

Reputation: 43700

Because your second table is after the first one, it won't be next to it. You should either float the first table to the right or reverse the order that the tables come in your markup.

This is similar to this question

Upvotes: 1

Related Questions