CODEWITHSUNDEEP
html
ethio
ethio

Reputation: 539

How can I display an image and a table side by side

I cant seem to have a logo and a table side by side but not very close to each other. The only way I've been able to achieve this is using a table, but the image and the table become very close to each other. I want to the table in the middle of the page, and the logo between the table and the far end of the left screen.

like this

logo table

this is how it is right now

logo

---table

<div id="header" style="height:15%;width:100%;">
    <img src="/e-com/images/logo.jpg" style="margin-left:15%;margin-top:5%"/>
    <table border="1" width="44" style="margin-left:30%;float:top;"> 
    <tr>
            <td><h1><a href="home">Home</a></h1></td>
            <td><h1><a href="home">Home</a></h1></td>
            <td><h1><a href="home">Home</a></h1></td>
    </tr>
    </table>
</div>

Upvotes: 6

Views: 30463

Answers (3)

Garry
Garry

Reputation: 5074

use two div and set to float left 

<div id="header" style="height:15%;width:100%;">
    <div style='float:left'>
        <img src="/e-com/images/logo.jpg" style="margin-left:15%;margin-top:5%"/>
    </div>
    <div style='float:leftt'>
        <table border="1" width="44" style="margin-left:30%;float:top;"> 
            <tr>
                <td><h1><a href="home">Home</a></h1></td>
                <td><h1><a href="home">Home</a></h1></td>
                <td><h1><a href="home">Home</a></h1></td>
            </tr>
        </table>
    </div>
</div>

Upvotes: 5

Sajjan Sarkar
Sajjan Sarkar

Reputation: 4198

This should be an easy way to get u going for what ur trying to achieve..

http://jsfiddle.net/8NDZP/

<div style='float:left'>
    <img src='http://upload.wikimedia.org/wikipedia/commons/thumb/d/d6/Moscow_July_2011-7a.jpg/325px-Moscow_July_2011-7a.jpg'>
</div>
<div style='float:right'>
    <table border="1" width="44" style="margin-left:30%;float:top;">
        <tr>
            <td>
                 <h1><a href="home">Home</a></h1>

            </td>
            <td>
                 <h1><a href="home">Home</a></h1>

            </td>
            <td>
                 <h1><a href="home">Home</a></h1>

            </td>
        </tr>
    </table>
</div>

Upvotes: 0

Diodeus - James MacFarlane
Diodeus - James MacFarlane

Reputation: 114367

1) Don't use tables for layouts. Learn how to use FLOATS.

2) Use a CSS background image for your logo. UI elements (that are not page content) should be CSS backgrounds, not inline images.

Assuming your logo is 100 x 100 (adjust accordingly):

.logoContainer {
      background-image:url(../yourimage.png);
      background-repeat:no-repeat
      padding-left:100px;
      min-height:100px;      
}

Upvotes: 1

Related Questions