I currently have 5 HTML pages with identical code. The code snippet looks like this:
<div id='generic'>
</div>
All 5 pages are linked to an external CSS file that contains the following styling:
<style>
#generic {
width: 700px;
height: 500px;
}
</style>
Within each of these 5 pages, I have inserted a table structured as follows:
<div id='bottomBar'>
<table id='bottomTable'>
<tr id='bottomTr'>
</tr>
</table>
</div>
This table consists of only one row. In this single row, I need to randomly select a number between 1 and 10 which will determine the number of td elements present in the row. Therefore, one page might display 2 td's while another displays 6 td's, and so on. My objective is to maintain a consistent vertical position for the table across all pages, yet ensure horizontal alignment. Due to the possibility of additional paragraphs before or after the table on various pages, I must utilize position absolute. This positioning allows me to achieve uniform vertical placement of the table. How can I center each table horizontally? When I mention horizontal alignment, I am referring to having equal whitespace both to the left and right of the table regardless of the number of td's present.
margin: 0 auto;
The above margin styling does not provide desired results. It’s important to note that I do not have access to CSS3 features and I am specifically designing for compatibility with IE8.