I am attempting to create a 3-column layout using only DIVs, but I am facing some challenges.
If I were to use tables in the traditional HTML 4 way, I could achieve this:
<div style="width:100%">
<table width="50%" align="center">
<tr>
<td align="left">
<img src="whatever.jpg">
</td>
<td align="center">
1 2 3
</td>
<td align="right">
<img src="whateverright.jpg">
</td>
</tr>
</table>
</div>
The table spans 50% and is centered. Here is my attempt with divs:
<div style="width:100%;overflow:hidden;">
<div>
<div style="float:left;">
<img src="whatever.jpg">
</div>
<div>1 2 3</div>
<div style="float:right;">
<img src="whateverright.jpg">
</div>
</div>
</div>
I have only been able to center it by knowing the total size of all elements in pixels or em units. However, this causes problems for text sizes based on screen resolution when creating complex pagination systems.
Is there a way to center a 3-column div inside another div without needing the sum of inner div widths?
I attempted to add margin:auto to the main div within the outer div, but was not successful.
It is essential that the solution works well with IE7. Any suggestions would be appreciated as the internal columns display correctly, but centering the entire structure remains a challenge.