Este es mi codigo actual...
Código HTML :
<div style="margin:auto; min-width:200px;"> <!-- AREA DE CALIFICACIONES --> <div style="width:125px; height:50px; float:left; border:solid 1px #666; clear:left;"><br /><center>Asignatura</center></div> <div style="width:121px; height:50px; float:left; margin:0px;"> <div style="width:120px; height:25px; float:left; border:solid 1px #666; border-left:none;"><center>Primer Parcial</center></div> <div style="width:60px; height:24px; float:left; border:solid 1px #666; border-left:none; border-top:none;"><center>Faltas</center></div> <div style="width:59px; height:24px; float:left; border:solid 1px #666; border-left:none; border-top:none;"><center>Calif.</center></div> </div> <div style="width:121px; height:50px; float:left; margin:0px;"> <div style="width:120px; height:25px; float:left; border:solid 1px #666; border-left:none;"><center>Segundo Parcial</center></div> <div style="width:60px; height:24px; float:left; border:solid 1px #666; border-left:none; border-top:none;"><center>Faltas</center></div> <div style="width:59px; height:24px; float:left; border:solid 1px #666; border-left:none; border-top:none;"><center>Calif.</center></div> </div> <div style="width:120px; height:50px; float:left; border:solid 1px #666; margin-left:3px; "><br /><center>Total Faltas</center></div> <div style="width:120px; height:50px; float:left; border:solid 1px #666; border-left:none;"><br /><center>Promedio General</center></div> <div style='width:125px; height:24px; float:left; border:solid 1px #666; border-top:none; clear:left;'> Materia 1</div><div style='width:121px; height:24px; float:left; margin:0px;'> <div style='width:60px; height:24px; float:left; border:solid 1px #666; border-left:none; border-top:none;'><center>2</center></div> <div style='width:59px; height:24px; float:left; border:solid 1px #666; border-left:none; border-top:none;'><center>10</center> </div> </div><div style='width:121px; height:24px; float:left; margin:0px;'> <div style='width:60px; height:24px; float:left; border:solid 1px #666; border-left:none; border-top:none;'><center>0</center></div> <div style='width:59px; height:24px; float:left; border:solid 1px #666; border-left:none; border-top:none;'><center>10</center> </div> </div><div style='width:120px; height:24px; float:left; border:solid 1px #666;border-top:none; margin-left:3px; '><center>2</center></div> <div style='width:120px; height:24px; float:left; border:solid 1px #666; border-left:none; border-top:none;'><center>10</center></div><div style='width:125px; height:24px; float:left; border:solid 1px #666; border-top:none; clear:left;'> Materia 2</div><div style='width:121px; height:24px; float:left; margin:0px;'> <div style='width:60px; height:24px; float:left; border:solid 1px #666; border-left:none; border-top:none;'><center>0</center></div> <div style='width:59px; height:24px; float:left; border:solid 1px #666; border-left:none; border-top:none;'><center>10</center> </div> </div><div style='width:121px; height:24px; float:left; margin:0px;'> <div style='width:60px; height:24px; float:left; border:solid 1px #666; border-left:none; border-top:none;'><center>0</center></div> <div style='width:59px; height:24px; float:left; border:solid 1px #666; border-left:none; border-top:none;'><center>8</center> </div> </div><div style='width:120px; height:24px; float:left; border:solid 1px #666;border-top:none; margin-left:3px; '><center>0</center></div> <div style='width:120px; height:24px; float:left; border:solid 1px #666; border-left:none; border-top:none;'><center>9</center></div><div style='width:125px; height:24px; float:left; border:solid 1px #666; border-top:none; clear:left;'> Materia 3</div><div style='width:121px; height:24px; float:left; margin:0px;'> <div style='width:60px; height:24px; float:left; border:solid 1px #666; border-left:none; border-top:none;'><center>0</center></div> <div style='width:59px; height:24px; float:left; border:solid 1px #666; border-left:none; border-top:none;'><center>10</center> </div> </div><div style='width:121px; height:24px; float:left; margin:0px;'> <div style='width:60px; height:24px; float:left; border:solid 1px #666; border-left:none; border-top:none;'><center>0</center></div> <div style='width:59px; height:24px; float:left; border:solid 1px #666; border-left:none; border-top:none;'><center>10</center> </div> </div><div style='width:120px; height:24px; float:left; border:solid 1px #666;border-top:none; margin-left:3px; '><center>0</center></div> <div style='width:120px; height:24px; float:left; border:solid 1px #666; border-left:none; border-top:none;'><center>10</center></div><div style='width:125px; height:24px; float:left; border:solid 1px #666; border-top:none; clear:left;'> Materia 4</div><div style='width:121px; height:24px; float:left; margin:0px;'> <div style='width:60px; height:24px; float:left; border:solid 1px #666; border-left:none; border-top:none;'><center>0</center></div> <div style='width:59px; height:24px; float:left; border:solid 1px #666; border-left:none; border-top:none;'><center>10</center> </div> </div><div style='width:121px; height:24px; float:left; margin:0px;'> <div style='width:60px; height:24px; float:left; border:solid 1px #666; border-left:none; border-top:none;'><center>0</center></div> <div style='width:59px; height:24px; float:left; border:solid 1px #666; border-left:none; border-top:none;'><center>8</center> </div> </div><div style='width:120px; height:24px; float:left; border:solid 1px #666;border-top:none; margin-left:3px; '><center>0</center></div> <div style='width:120px; height:24px; float:left; border:solid 1px #666; border-left:none; border-top:none;'><center>9</center></div><div style='width:125px; height:24px; float:left; border:solid 1px #666; border-top:none; clear:left;'> Materia 5</div><div style='width:121px; height:24px; float:left; margin:0px;'> <div style='width:60px; height:24px; float:left; border:solid 1px #666; border-left:none; border-top:none;'><center>0</center></div> <div style='width:59px; height:24px; float:left; border:solid 1px #666; border-left:none; border-top:none;'><center>8</center> </div> </div><div style='width:121px; height:24px; float:left; margin:0px;'> <div style='width:60px; height:24px; float:left; border:solid 1px #666; border-left:none; border-top:none;'><center>0</center></div> <div style='width:59px; height:24px; float:left; border:solid 1px #666; border-left:none; border-top:none;'><center>7</center> </div> </div><div style='width:120px; height:24px; float:left; border:solid 1px #666;border-top:none; margin-left:3px; '><center>0</center></div> <div style='width:120px; height:24px; float:left; border:solid 1px #666; border-left:none; border-top:none;'><center>7.5</center></div><div style='width:125px; height:24px; float:left; border:solid 1px #666; border-top:none; clear:left;'> Materia 6</div><div style='width:121px; height:24px; float:left; margin:0px;'> <div style='width:60px; height:24px; float:left; border:solid 1px #666; border-left:none; border-top:none;'><center>0</center></div> <div style='width:59px; height:24px; float:left; border:solid 1px #666; border-left:none; border-top:none;'><center>8</center> </div> </div><div style='width:121px; height:24px; float:left; margin:0px;'> <div style='width:60px; height:24px; float:left; border:solid 1px #666; border-left:none; border-top:none;'><center>0</center></div> <div style='width:59px; height:24px; float:left; border:solid 1px #666; border-left:none; border-top:none;'><center>8</center> </div> </div><div style='width:120px; height:24px; float:left; border:solid 1px #666;border-top:none; margin-left:3px; '><center>0</center></div> <div style='width:120px; height:24px; float:left; border:solid 1px #666; border-left:none; border-top:none;'><center>8</center></div> <div style="clear:both; height:10px;"></div> <div style='width:125px; height:24px; float:left; border:solid 1px #666; clear:left;'><center>Promedio Mensual</center></div> <div style='width:120px; height:24px; float:left; border:solid 1px #666; border-left:none; '><center>9.3</center></div><div style='width:120px; height:24px; float:left; border:solid 1px #666; border-left:none; '><center>8.5</center></div> <div style="clear:both; height:2px;"></div> <div style='width:125px; height:24px; float:left; border:solid 1px #666; clear:left;'><center>Conducta</center></div> <div style='width:120px; height:24px; float:left; border:solid 1px #666; border-left:none; '><center>Muy Buena</center></div><div style='width:120px; height:24px; float:left; border:solid 1px #666; border-left:none; '><center>Muy Buena</center></div> </div> <!-- FIN AREA DE CALIFICACIONES -->
Y me da por resultado esto:
Y yo quiero que me quede asi:
El asunto, como tal vez se imaginen, es que las calificaciones se recuperan desde una base de datos y duplico los divs con un ciclo en php, asi que mientras mas parciales haya mas ancho va a ser el contenido interno del div que contiene las calificaciones y la idea es que se vaya centrando el contenido automaticamente...
Espero puedan ayudarme, de antemano muchas gracias.