Can someone help me figure out how to align my image and table on the same level? I've been struggling to 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>
<td>Makeups</td>
</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've updated the image, but it's a similar size http://jsfiddle.net/w6d5g/