How To Float a Table in the Content Div?

[DanCarroll]

Okay, hope someone can help with this. I am attempting to place 2 tables side by side in the content div of a default template. Without floating or a div a single table stays within bounds. As soon as I float a single table "left" to make room for another, I lose integrity in the page and the footer contents end up to the right of the table. Attempting to use a container div doesn't help. Any suggestions?

Standard template divs for content area:

Code Select Expand

<div class="cat_bar">
    <h3 class="catbg">Schedule Day Off Request Review</h3>
</div><div class="windowbg2">
  <span class="topslice"><span></span></span>
    <div class="content" style="text-align:center;">

My html output from template.php:

Code Select Expand

<div style="width:100%;margin 0 auto;"><div style="width:50%;float:left;">

<table class="image1table" name="MyScheduleTable" id="myTable" style="float:left;">
<tr><th colspan="5">SCHEDULE</th></tr>
<tr><th>Date</th><th>Name</th><th>Home?</th><th>Shoot #</th><th>Miles</th></tr>
<tr><td>03/01/12</td><td>Forum Administrator</td><td>H</td><td>test100</td><td>15.00</td></tr>

<tr><td>03/02/12</td><td>Forum Administrator</td><td>H</td><td>TEST101</td><td>15.00</td></tr>
<tr><td>03/02/12</td><td>photographer1</td><td>H</td><td>TEST101</td><td>15.00</td></tr>
<tr><td>03/02/12</td><td>photographer1</td><td>H</td><td>TEST101</td><td>15.00</td></tr>

<tr><td>03/02/12</td><td>photographer1</td><td>H</td><td>TEST101</td><td>15.00</td></tr>
<tr><td>03/03/12</td><td>photographer1</td><td>H</td><td>TEST101</td><td>15.00</td></tr>
<tr><td>03/03/12</td><td>photographer2</td><td>H</td><td>TEST200</td><td>28.00</td></tr>

<tr><td>03/04/12</td><td>photographer2</td><td>H</td><td>TEST200</td><td>28.00</td></tr>
</table>

</div><div style="width:50%;float:left;">
<table class="image1table" name="MyScheduleTable" id="myTable" style="float:left;">
<tr><th colspan="5">SCHEDULE</th></tr>
<tr><th>Date</th><th>Name</th><th>Home?</th><th>Shoot #</th><th>Miles</th></tr>

<tr><td>03/01/12</td><td>Forum Administrator</td><td>H</td><td>test100</td><td>15.00</td></tr>
<tr><td>03/02/12</td><td>Forum Administrator</td><td>H</td><td>TEST101</td><td>15.00</td></tr>
<tr><td>03/02/12</td><td>photographer1</td><td>H</td><td>TEST101</td><td>15.00</td></tr>

<tr><td>03/02/12</td><td>photographer1</td><td>H</td><td>TEST101</td><td>15.00</td></tr>
<tr><td>03/02/12</td><td>photographer1</td><td>H</td><td>TEST101</td><td>15.00</td></tr>
<tr><td>03/03/12</td><td>photographer1</td><td>H</td><td>TEST101</td><td>15.00</td></tr>

<tr><td>03/03/12</td><td>photographer2</td><td>H</td><td>TEST200</td><td>28.00</td></tr>
<tr><td>03/04/12</td><td>photographer2</td><td>H</td><td>TEST200</td><td>28.00</td></tr>
</table>

</div></div>

[Kays]

Hi, this might sound a bit funky. But you want two tables side by each. Add the code for the table on the right first with "float: right". Then the code for the left table "float: left"

[DanCarroll]

Thanks Kays, I guess I didn't explain it well enough. The problem wasn't so much getting the tables side by side but preventing the float attribute from breaking the page integrity. The tables stay within the the content div fine without the float. Add a float and the tables 'break out' with the footer now floating to one side.

I was considering where I might place a "clear" but ended up using a table to house the two tables and that kept everything in 'bounds'.

Again, thank you for your reply.

[Kays]

N/P.

I don't like divisions as they can be frustrating. Have you tried enclosing those division in another division? Or defining a size for them? Unlike a table they're at 100% by default. Which can break things as you are describing.

[DanCarroll]

I did try resizing but didn't put the time into resolving the issue. I "cheated" and enclosed the two tables inside of another. It was for tabular data and I do want them side by side so...

And disliking divs. I think they are great. I never want to go back to creating web pages and using tables for layout. 

[live627]

I concur; tabular layouts are so complicated to tweak and maintain IMO.