Alex Ku
Alex Ku

Reputation: 13

Different elements inside td aligning horizontally

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

Answers (1)

roshan
roshan

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

Related Questions