How to display Table and Image using inline-block in Html? - html

Question

How can I display my image and the table on the same level? This is really depressing me because I can't get "inline-block" to work. :(
<p id="play">
hey
</p>
<div id="menu">
<table>
<tr>
<td>Models</td>
</tr>
<tr>
<td>Cars</td>
</tr>
<tr>
<td>Modern Houses</td>
</tr>
<tr>
<td>Vacation Spots</td>
</tr>
<tr>
<td>Sports and Outdoors</td>
</tr>
<tr>
<td>Books</td>
</tr>
<tr>
<td>Abandoned Houses</td>
</tr>
<tr>
<td>Summer Wear</td>
</tr>
<tr>
<td>Makeups</td>
</tr>
<tr>
<td id="site">Site Info</td>
</tr>
</table>
</div>
<img src="C:\Users\Elexie\Documents\Downloads\faki2.jpg"/>
body {
background: #181818;
margin: 0;
padding: 0;
}
/* set body display to inline-table*/
#play {
background: black;
color: white;
margin: 0;
padding: 0;
height: 35px;
}
table,td {
color: white;
border: 1px solid white;
border-collapse: collapse;
width: 160px;
padding: 10px;
font-family: ;
}
table {
}
#site {
height: 350px;
}
img {
float: right;
}
I changed the picture, but it's of similar size
http://jsfiddle.net/w6d5g/

Answer 1

In your css code:
table{
float:left;
}
Should do the trick.
Read more: http://www.w3schools.com/css/css_float.asp

Answer 2

Check this fiddle: http://jsfiddle.net/Mohamed_nabil/F8MKp/
/*******Added style******/
img
{
/*165px is your Menu width with borders*/
max-width: calc(100% - 165px);
/*For cross browser*/
-webkit-max-width: calc(100% - 165px);
-moz-max-width: calc(100% - 165px);
-o-max-width: calc(100% - 165px);
-ms-max-width: calc(100% - 165px);
display: inline-block;
vertical-align: top;/* Can be middle, bottom */
}
#menu{
display: inline-block;
}

Answer 3

Firstly, wrap your image tag with a div. Name this div anything you want. Let's name it: "image-test".
<div class="image-test">
<img src="(URL for IMAGE)">
</div>
Next, let's say you want your table to take up 50% of the width and your image to take up the other 50%. We are also going to float these div elements so they are not in the flow of the document.
#menu{
float:left;
width:50%;
}
.image-test{
float:left;
width:50%;
}
You'll notice your image is larger than the containing div, so let's set a max width on all images to avoid future problems.
img {
max-width:100%;
}