Reputation: 13
I have two images, link and two ul's inside one td element, is there any way to inline them? http://jsfiddle.net/akeo4zmw/
<table>
<tr>
<td id="menu"><div>
<img src="imgs/logo_03.jpg" /></div>
<div>
<ul id="leftsidemenu">
<li>Woman</li>
<li>Men</li>
<li>Kids</li>
<li>Coming Soon</li>
<li>About</li>
</ul>
</div>
<div>
<ul id="rightsidemenu">
<li>Log In</li>
<li>Basket</li>
</ul>
</div>
<div>
<a href="https://www.google.ru/webhp?tab=ww&ei=b0nuVK3LEoeiyAO7yYC4Bg&ved=0CAYQ1S4"><img src="imgs/images/images/search_05.jpg" /></a>
</div>
</td>
</tr>
</table>
Upvotes: 0
Views: 7379
Reputation: 2510
Just give float left to all the div elements.
body {
background-color: #e5e5e5;
}
table {
border: 1px solid;
border-spacing: 0;
background-color: #ffffff
}
table td {
vertical-align: top;
}
#leftsidemenu li,
#rightsidemenu li {
display: inline;
}
div {
display: inline;
float: left;
}
<table>
<tr>
<td id="menu">
<div>
<img src="imgs/logo_03.jpg" />
</div>
<div>
<ul id="leftsidemenu">
<li>Woman</li>
<li>Men</li>
<li>Kids</li>
<li>Coming Soon</li>
<li>About</li>
</ul>
</div>
<div>
<ul id="rightsidemenu">
<li>Log In</li>
<li>Basket</li>
</ul>
</div>
<div>
<a href="https://www.google.ru/webhp?tab=ww&ei=b0nuVK3LEoeiyAO7yYC4Bg&ved=0CAYQ1S4">
<img src="imgs/images/images/search_05.jpg" />
</a>
</div>
</td>
</tr>
</table>
Upvotes: 3