Hello: I am trying to create a result form from mysql and I am having problems formatting my html data tables. The result should be show a picture ( link in mysql ), then next to it a table that will probably contain 4 fields that I have as table0. I want this to be 100%, but when I make it 100%, it automatically drops below the picture. The same goes for the 2 tables, table1 and table2 ( all these names are temp only so that I can see the placement ). I can not get them to be 50% each. I want to add another row of tables that will be hidden in all views accept with a media query of 240. This would then show a little more information for mobile users. I am not worried just yet about the media query. Can anyone help me please. I have added the code here along with a link. I am not using external css until it works. http://www.pepelepew1962.x10.mx/help.html <!DOCTYPE html> <head> <style type="text/css"> #pager { width:75%; } #page01 { margin: 10px auto; border: 2px solid #191919; background-color: #2C2C2C; padding: 10px; border-radius: 4px; /* [disabled]margin-bottom: 10px; */ /* [disabled]margin-top: 10px; */ } #pk01 img { width: 75px; height: 100px; } .pix { display:block; max-width:100%; height:auto; margin:0.0em auto; float: left; } .table0 { width:90%; margin:auto; font-size:12px; border:1px solid #0000FF; float: left; margin-bottom: 5px; } .table0 th { font-weight:bold; color: yellow; vertical-align:middle; text-align:center; border:1px solid #C1FFC1; } .table1 { width:40%; margin:auto; font-size:12px; border:1px solid #FF1493; float: left; } .table1 th { font-weight:bold; color:#00FFFF; vertical-align:middle; text-align:center; border:1px solid #C1FFC1; } .table1 tr { border:1px solid #C1FFC1; } .table1 td { font-weight:bold; color:#00FF00; vertical-align:middle; text-align:left; padding-left: 15px; border:1px solid #C1FFC1; } .table2 { width:40%; margin:auto; font-size:12px; border:1px solid #FF1493; float: left; } .table2 th { font-weight:bold; color:#00FFFF; vertical-align:middle; text-align:center; border:1px solid #C1FFC1; } .table2 tr { border:1px solid #C1FFC1; } .table2 td { font-weight:bold; color:#FF0000; vertical-align:middle; text-align:left; padding-left: 15px; border:1px solid #C1FFC1; } </style> <title> Test Page </title> </head> <body bgcolor="#000000"> <div id="pager"> <div id="page01"> <div id="pk01"> <img src="300x250_uap.gif" class="pix" /> </div> <div id="exampleB"> <table class="table0"> <tr> <th> SOMETHING</th> <th> SOMETHING</th> <th> SOMETHING</th> <th> SOMETHING</th> </tr> </table> </div> <div id="exampleB"> <table class="table2"> <tr> <td>Book</td> <td>$5.00</td> </tr> <tr> <td>Shoe</td> <td>$10.00</td> </tr> <tr> <td>Flower</td> <td>$3.00</td> </tr> </table> <table class="table1"> <tr> <td>Books</td> <td>$5.00</td> </tr> <tr> <td>Shoes</td> <td>$10.00</td> </tr> <tr> <td>Flowers</td> <td>$3.00</td> </tr> </table> </div> <div style="clear: left;"></div> </div> <div id="page01"> <div id="pk01"> <img src="300x250_uap.gif" class="pix" /> </div> <div id="exampleB"> <table class="table0"> <tr> <th> SOMETHING</th> <th> SOMETHING</th> <th> SOMETHING</th> <th> SOMETHING</th> </tr> </table> </div> <div id="exampleB"> <table class="table2"> <tr> <td>Book</td> <td>$5.00</td> </tr> <tr> <td>Shoe</td> <td>$10.00</td> </tr> <tr> <td>Flower</td> <td>$3.00</td> </tr> </table> <table class="table1"> <tr> <td>Books</td> <td>$5.00</td> </tr> <tr> <td>Shoes</td> <td>$10.00</td> </tr> <tr> <td>Flowers</td> <td>$3.00</td> </tr> </table> </div> <div style="clear: left;"></div> </div> </div> </body></html> Code (markup):