inline-block: cannot display elements horizontally - html

Question

I am trying to display three tables as three separated elements, displayed horizontally. This means that they should appear one alongside each other, from left to right. I tried to use inline-block and set the margins, borders but it doesn't work:
<div style="border:2px solid black; width:485px;">
<h1 align= "center" style="color:blue"> Interaction </h1>
<p style="display:inline-block; width:180px; margin:10px; padding:20px;">
<h3> Light </h3>
<table border="1">
<tr>
<td> Color </td>
<td> <input type="text" id="light-color" value="0xffffff"> </input> </td>
</tr>
<tr>
<td> Type </td>
<td>
<select id="light-type">
<option value="point"> Point Light </option>
<option value="spot"> Spot Light </option>
<option value="ambient"> Ambient Light </option>
<option value="area"> Area Light </option>
<option value="directional"> Directional Light </option>
<select>
</td>
</tr>
</table>
</p>
<p style="display:inline-block; width:180px; margin:10px; padding:20px;">
<h3> Material </h3>
<table border="1">
<tr>
<td> Diffuse </td>
<td> <input type="text" id="material-diffuse" value="0xffffff"> </input> </td>
</tr>
<tr>
<td> Ambient </td>
<td> <input type="text" id="material-ambient" value="0xffffff"> </input> </td>
</tr>
<tr>
<td> Emissive </td>
<td> <input type="text" id="material-emissive" value="0xffffff"> </input> </td>
</tr>
<tr>
<td> Specular </td>
<td> <input type="text" id="material-specular" value="0xffffff"> </input> </td>
</tr>
<tr>
<td> Shininess </td>
<td> <input type="text" id="material-shininess" value="0xffffff"> </input> </td>
</tr>
<tr>
<td> Type </td>
<td>
<select id="material-type">
<option value="lambert"> Lambert </option>
<option value="normal"> Normal </option>
<option value="phong"> Phong </option>
</select>
</td>
</tr>
</table>
</p>
<p style="display:inline-block; width:180px; margin:10px; padding:20px;">
<h3> Object </h3>
<table border="1">
<tr>
<td> Type </td>
<td>
<select>
<option value= "sphere"> Sphere </option>
<option value= "cube"> Cube </option>
<option value= "cylinder"> Cylinder </option>
</select>
</td>
</tr>
</table>
</p>
</div>
The tables are still displayed vertically.

Answer 1

My suggestion would be to change the containing p tags to divs and then float each one left and then clear them at the end. This will also be a more cross-browser solution.
<div style="border:2px solid black; width:485px;">
<h1 align= "center" style="color:blue"> Interaction </h1>
<div style="float:left; display:inline-block; width:180px; margin:10px; padding:20px;">
<h3> Light </h3>
<table border="1">
<tr>
<td> Color </td>
<td> <input type="text" id="light-color" value="0xffffff"> </input> </td>
</tr>
<tr>
<td> Type </td>
<td>
<select id="light-type">
<option value="point"> Point Light </option>
<option value="spot"> Spot Light </option>
<option value="ambient"> Ambient Light </option>
<option value="area"> Area Light </option>
<option value="directional"> Directional Light </option>
<select>
</td>
</tr>
</table>
</div>
<div style="float:left; display:inline-block; width:180px; margin:10px; padding:20px;">
<h3> Material </h3>
<table border="1">
<tr>
<td> Diffuse </td>
<td> <input type="text" id="material-diffuse" value="0xffffff"> </input> </td>
</tr>
<tr>
<td> Ambient </td>
<td> <input type="text" id="material-ambient" value="0xffffff"> </input> </td>
</tr>
<tr>
<td> Emissive </td>
<td> <input type="text" id="material-emissive" value="0xffffff"> </input> </td>
</tr>
<tr>
<td> Specular </td>
<td> <input type="text" id="material-specular" value="0xffffff"> </input> </td>
</tr>
<tr>
<td> Shininess </td>
<td> <input type="text" id="material-shininess" value="0xffffff"> </input> </td>
</tr>
<tr>
<td> Type </td>
<td>
<select id="material-type">
<option value="lambert"> Lambert </option>
<option value="normal"> Normal </option>
<option value="phong"> Phong </option>
</select>
</td>
</tr>
</table>
</div>
<div style="float:left; display:inline-block; width:180px; margin:10px; padding:20px;">
<h3> Object </h3>
<table border="1">
<tr>
<td> Type </td>
<td>
<select>
<option value= "sphere"> Sphere </option>
<option value= "cube"> Cube </option>
<option value= "cylinder"> Cylinder </option>
</select>
</td>
</tr>
</table>
</div>
<div style="clear:both;"></div>
</div>

Answer 2

Use float: left for first table.
Separate the next two tables with a left margin. e.g. margin-left: 120px;
It's a famous problem. For your future references. http://alistapart.com/article/holygrail

Answer 3

First, replace the paragraph tags with divs and then add the following class to each div;
.nextToEachOther {
float:left;
display:inline-block;
}

Answer 4

The issue that you're having is miss-understanding or the property inline-block.
If you simply use inline then the elements would float inline, defying any margin but still border would work.
If you use inline-block (same as your case) the elements would get the margins too, so I guess that is the issue.
What I would ask you to do is to either:
Remove all the margins and use inline-block. This way the elements will be placed as a inline and block. block is a display property's value. You can learn about it here: http://www.w3schools.com/cssref/pr_class_display.asp or go to Mozilla Developer Network here: https://developer.mozilla.org/en-US/docs/Web/CSS/display
You can remove the -block and use it simply as inline. This way even if you are having margins they won't be applied. And they all would be in a line.
One more thing:
You should always note the width of the elements, if any element gets a width more then the width of viewport, it will be placed under the other elements. So try using a width in percentage such as width: 10% this way browser will automatically shrink the element.

Answer 5

There is a specialty in the <p> element of HTML which allows it to be used without a closing tag. The next display:block tag (here: the <h3>) will auto-close the <p>, your closing </p> will be ignored.
Simplest solution is replacing <p> with <div>