...

View Full Version : display: inline issues



mxb7642
07-13-2007, 03:35 PM
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.

Jutlander
07-13-2007, 04:02 PM
You need to float them left:



div#normalTable {
float: left;
margin-right: 10px;
}


Switch that out with what you have.

mxb7642
07-13-2007, 04:18 PM
perfect! thank you

ahallicks
07-13-2007, 05:32 PM
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.

felgall
07-13-2007, 11:06 PM
All those <div>s around the tables are not needed either as you can just float the tables.

Arbitrator
07-14-2007, 02:36 AM
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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum