Please help converting 'simple' table to mobile div

table to div/css mobile

[Joyce1988]

Hello :)

I am having trouble converting these tables to div layout. This div layout will be used for display on mobile devices:

table 1:

<center>
<table cellpadding="0" cellspacing="0" align="center">
<tr align="center" valign="top">
<td width="7" align="left" valign="top"></td>
<td align="center"><small><strong>Content Title</strong></small><br/></td>
</tr>
</table>
</center>

table 2:

<center>
<table cellspacing="4" align="center">
<tr align="center">
<td align="right"><a href="http://" class="Download"><small><strong>download&nbsp;</strong></small></a></td>
<td align="left"><img src="download.png" width="20" height="19" border="0" alt=""/></td></tr>
</table>
</center>

How can i emulate the above using div/css for mobile?

Thanx for your help,
Joyce

[quartzy]

The best way to do this, is to make your divs with an elastic measurement. ie 100%, 100% of the screen. That would be good for mobiles as it will expand to the width of the screen, if you need further help, you will need to specify what you want.
html
<div id=table>
css
#table {width: 100%;}

[Joyce1988]

Heej Quartzy, thanx for your quick reply ;)

I understand that the complete markup div's should be in a div that's 100% width, but the problem i mentioned about is:

if you check the table layout, there's 1 cell that's giving just the spacing to the right before 'Content Title'. Then there's another spacing between 'download' and the icon on its right... Any examples of div layout that comes close?

Thanx, Joyce