CSS Popups (Meyers) & Positioning Divs 4/Row

[EdAROC]

I've been working on this all weekend. Got almost everything to work - just one final piece. When the css popups display the content below them are pushed down. Rats!

Objective: Display Player Profiles, like Baseball Cards. There is a #Container Div at the top of the page with width = 720px. Then some other information. Finally the Player Profiles, there should be 4 per row, and there are 64 players, so 16 rows in all. Each profile contains a photo, player name & info, followed by titles (records) and stats.

The existing code is using a Table to create the product.

I want to change 2 things:

(1) Stop using the Table to contain/manage Player Profiles. It would be great to simply construct each profile, then as players come and go I remove and add "Profile" Divs and the content flows as desire.

(2) Create a "Front" (photo, name & info) and "Back" (titles and stats) that appears when the user hovers over the photo. The Back should appear in the same position as the Front, that is, top-left for both is the same.

I removed the Table code for the first 5 player profiles to test them.
(1) The Profiles lay out 4/row as desired.
(2) I've got the Back to appear on the hover.

Problem: When the "Back" displays the Player Profile expands, pushing page content below the photo down.(starting with the player's name & info). The 1st player on the next row will move to the right of the expanded section, moving/pushing everything else that follows.

Here's the page code (css code is below this):

<div class="player">
<a class=info href="#">
<center>
<img src="photos/example.jpg" width="140" height="200" border="0" />
<span>
<b>example Player</b>
<div class="player_awards">
<br />example Ave 64.77%
<br />&nbsp;
<br />2007 example Champ
<br />2004 example Champ
<br />2004 Weekly $$
<br />2003 Weekly $$
<br />2003 example Champ
<br />&nbsp;
</div> <!-- player_awards -->
<div class="player_stats">
<table width="150" border="0">
<tr><td>Year</td><td>W</td><td>L</td><td>T</td><td>&nbsp;Ave</td></tr>
<tr><td>2011</td><td>10</td><td>5</td><td>2</td><td>64.45%</td></tr>
<tr><td>2010</td><td>6</td><td>10</td><td>1</td><td>60.9%</td></tr>
<tr><td>2009</td><td>6</td><td>9</td><td>2</td><td>67.1%</td></tr>
<tr><td>2008</td><td>9</td><td>8</td><td>0</td><td>68.1%</td></tr>
<tr><td>2007</td><td>10</td><td>7</td><td>0</td><td>69.5%</td></tr>
<tr><td>2006</td><td>9</td><td>8</td><td>0</td><td>60.2%</td></tr>
<tr><td>2005</td><td>10</td><td>7</td><td>0</td><td>66.8%</td></tr>
</table>
</div> <!-- player_stats -->
</span>
</center>
</a>
<b>example player</b>
<font size="-1">
<br />13<sup>th</sup> Season
<br /><div class="teams buf"><b>example team</b></div>
example location
</font>
</div> <!-- player -->

<div class="player">
<a class=info href="#">
<center>
<img src="photos/example.jpg" width="140" height="200" border="0" />
<span>
<b>example player</b>
<div class="player_awards">
<br />example Ave 62.63%
<br />&nbsp;
</div>
<div class="player_stats">
<table width="150">
<tr><td>Year</td><td>W</td><td>L</td><td>T</td><td>&nbsp;Ave</td></tr>
<tr><td>2011</td><td>8</td><td>9</td><td>0</td><td>62.11%</td></tr>
<tr><td>2010</td><td>12</td><td>5</td><td>0</td><td>62.9%</td></tr>
<tr><td>2009</td><td>6</td><td>11</td><td>0</td><td>65.8%</td></tr>
<tr><td>2008</td><td>7</td><td>10</td><td>0</td><td>63.2%</td></tr>
<tr><td>2007</td><td>8</td><td>8</td><td>1</td><td>61.7%</td></tr>
</table>
</div> <!-- player_stats -->
</span>
</center>
</a>
<b>example player</b>
<font size="-1">
<br />6<sup>th</sup> Season
<br /><div class="was"><b>example team</b></div>
example location
</font>
</div>

<div class="player">
<a class=info href="#">
<center>
<img src="photos/no_photo.gif" width="100" height="200" border="0" align="middle" />
<span>
<b>example player</b>
<div class="player_awards">
</div> <!-- player_awards -->
<br />example Ave 64.79%
<br />&nbsp;
<br />2011 example Champ
<br />&nbsp;
<div class="player_stats">
<table width="150">
<tr><td>Year</td><td>W</td><td>L</td><td>T</td><td>Ave</td></tr>
<tr><td>2011</td><td>13</td><td>4</td><td>0</td><td>68.33%</td></tr>
<tr><td>2010</td><td>9</td><td>8</td><td>0</td><td>61.3%</td></tr>
</table>
</div> <!-- player_stats -->
</span>
</center>
</a>
<b>example player</b>
<font size="-1">
<br />4<sup>th</sup> Season
<br /><div class="teams "><b>&nbsp;</b></div>
&nbsp; ***HomeTown?***
</font>
</div> <!-- player -->

<div class="player">
<a class=info href="#">
<center>
<img src="photos/example.jpg" width="100" height="200" border="0" align="middle" />
<span>
<b>example player</b>
<div class="player_awards">
<br />example Ave 63.74%
<br />&nbsp;
<br />2011 example Champ
<br />2009 example Champ
<br />&nbsp;
</div> <!-- player_awards -->
<div class="player_stats">
<table width="150">
<tr><td>Year</td><td>W</td><td>L</td><td>T</td><td>&nbsp;Ave</td></tr>
<tr><td>2011</td><td>12</td><td>4</td><td>1</td><td>68.36%</td></tr>
<tr><td>2010</td><td>6</td><td>10</td><td>1</td><td>60.1%</td></tr>
<tr><td>2009</td><td>11</td><td>6</td><td>0</td><td>68.5%</td></tr>
<tr><td>2008</td><td>7</td><td>10</td><td>0</td><td>60.3%</td></tr>
<tr><td>2007</td><td>8</td><td>9</td><td>0</td><td>62.1%</td></tr>
</table>
</div> <!-- player_stats -->
</span>
</center>
</a>
<b>example player</b>
<font size="-1">
<br />6<sup>th</sup> Season
<br /><div class="teams ne"><b>example team</b></div>
&nbsp;
</font>
</div> <!-- player -->

<div class="player">
<a class=info href="#">
<center>
<img src="photos/no_photo.gif" width="100" height="200" border="0" align="middle" />
<span>
<b>example player</b>
<div class="player_awards">
<br />example Ave 58.18%
<br />&nbsp;
<br />2010 example Improved Player
<br />&nbsp;
</div> <!-- player awards -->
<div class="player_stats">
<table width="150">
<tr><td>Year</td><td>W</td><td>L</td><td>T</td><td>&nbsp;Ave</td></tr>
<tr><td>2011</td><td>9</td><td>8</td><td>0</td><td>62.11%</td></tr>
<tr><td>2010</td><td>8</td><td>9</td><td>0</td><td>60.1%</td></tr>
<tr><td>2009</td><td>6</td><td>11</td><td>0</td><td>59.3%</td></tr>
<tr><td>2008</td><td>11</td><td>6</td><td>0</td><td>64.0%</td></tr>
<tr><td>2007</td><td>6</td><td>10</td><td>1</td><td>59.8%</td></tr>
<tr><td>2006</td><td>11</td><td>6</td><td>0</td><td>57.8%</td></tr>
<tr><td>2005</td><td>7</td><td>10</td><td>0</td><td>60.4%</td></tr>
</table>
</div> <!-- player stats -->
</span>
</center>
</a>
<b>example player</b>
<font size="-1">
<br />12<sup>th</sup> Season
<br /><div class="teams chi"><b>example team</b></div>
example location
<br />
</font>
</div>

Here's the css code:

a.info{
 position:relative; /*this is the key*/
 z-index:24; background-color:#fff;
 color:#000;
 text-decoration:none}

a.info:hover{z-index:25; background-color:#fff}

a.info span{display: none}

a.info:hover span{ /*the span will display just on :hover state*/
 display:block;
 position:relative;
 top:-15.0em; left:0em; right:0em; width:12.5em;
 border:4px ridge #6699cc;
 background-color:#6699cc; color:#000;}

[edited by: alt131 at 10:49 pm (utc) on Sep 3, 2012]
[edit reason] Thread Tidy - Examplifying [/edit]

[alt131]

Hi EdAROC, Meyer used position:absolute on his span, and you have position:relative. That makes the difference here, because position:absolute removes an element from the flow so it is drawn without affecting the other elements, or as you are seeing, without "pushing" the other elements down.