Geek Answers Handbook

How to display image and table side by side

It seems that I do not have a logo and a table nearby, but not very close to each other. The only way to achieve this is to use a table, but the image and the table become very close to each other. I want to see the table in the middle of the page and the logo between the table and the far edge of the left screen.

like this

logo

that's how it is 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>
+4
source share
3 answers

use two divs and check 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>
+2
source

1) Do not use tables for layouts. Learn how to use FLOATS.

2) Use a CSS background image for your logo. User interface elements (which are not page content) should be a CSS background, 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; }
0
source

This should be an easy way to achieve what ur is 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>
0
source

More articles:


All Articles