display:in-line div interior text affecting alignment

[jcanker]

I have a div at the bottom of my page set as a container for 11 more divs, all set to be display:in-line.

 

They line up fine and work as expected, until I start putting text into them.  Then some of them are higher than the others. Even more boggling to me is that they line up differently in IE and Chrome:

 

MY QUESTION:  Why does text affect the vertical alignment of the in-line display divs?  How can I get this so that 1) Text does not affect the vertical alignement and keeps them all in line with each other and 2) Text wraps properly within the div?

 

Here's how they appear in IE and Chrome:

IE:

 

And in Chrome:

 

 

 

This problem started when I had to adjust the word-wrap and white-space attributes because the text wasn't wrapping but was just running off the edge.  I did notice at that point that without the word-wrap and white-space attributes that if I tried to force a line break with <br /> in the text did shift that div higher, so maybe the word-wrap wasn't the start of it.

 

Here's the html.  The CSS is all in-line for now until everything gets finalized, then I'll move it off into an external css.

                <div id="bottomGameStatusBar" style="clear:both;width:100%;background-color:white;overflow:auto;overflow-y:hidden;">
                	<div id="bottomGameStatusDetails">
                    <ul style="display:inline-block">
                    	<li style="display:inline-block">Current Round: 10</li>
                        <li style="display:inline-block">Current Turn: Player 2 (DisplayName)</li>
                        <li style="display:inline-block">Current Phase: Movement</li>
                   	</ul>
                    
                    </div>
                	<div id="playerDeck" style="display:inline-block;  width:100px; height:100px; background-color:black; color:white; word-wrap: break-word;"><div style="word-wrap:break-word; white-space:normal;">Player Deck appears here<br/>Click to Draw</div>
                    </div> 
                    <div id="card01" class="cardInHand" style="display:inline-block; word-wrap:break-word; white-space:normal; width:100px; height:100px; border:solid 1px black; background-color:#d3d3d3; text-align:center;">1st Card In Hand
                    </div>
                    <div id="card02" class="cardInHand" style="display:inline-block; word-wrap:break-word; white-space:normal;overflow:hidden; width:100px; height:100px; border:solid 1px black; background-color:#d3d3d3; text-align:center">2nd Card In Hand (if exists)
                    </div>
                    <div id="card03" class="cardInHand" style="display:inline-block; word-wrap:break-word; white-space:normal;width:100px; height:100px; border:solid 1px black; background-color:#d3d3d3; text-align:center">3rd Card In Hand (if exists)
                    </div>
                    <div id="card04" class="cardInHand" style="display:inline-block; word-wrap:break-word; white-space:normal;width:100px; height:100px; border:solid 1px black; background-color:#d3d3d3; text-align:center">4th Card In Hand (if exists)
                    </div>
                    <div id="card05" class="cardInHand" style="display:inline-block; word-wrap:break-word; white-space:normal;width:100px; height:100px; border:solid 1px black; background-color:#d3d3d3; text-align:center">5th Card In Hand (if exists)
                    </div>
                    <div id="card06" class="cardInHand" style="display:inline-block; word-wrap:break-word; white-space:normal;width:100px; height:100px; border:solid 1px black; background-color:#d3d3d3; text-align:center">6th Card In Hand (if exists)
                    </div>
                    <div id="card07" class="cardInHand" style="display:inline-block; word-wrap:break-word; white-space:normal;width:100px; height:100px; border:solid 1px black; background-color:#d3d3d3; text-align:center">7th Card In Hand (if exists)
                    </div>
                    <div id="card08" class="cardInHand" style="display:inline-block; word-wrap:break-word; white-space:normal;width:100px; height:100px; border:solid 1px black; background-color:#d3d3d3; text-align:center">8th Card In Hand (if exists)
                    </div>
                    <div id="card09" class="cardInHand" style="display:inline-block; word-wrap:break-word; white-space:normal;width:100px; height:100px; border:solid 1px black; background-color:#d3d3d3; text-align:center">9th Card In Hand (if exists)
                    </div>
                    <div id="card10" class="cardInHand" style="display:inline-block; word-wrap:break-word; white-space:normal;width:100px; height:100px; border:solid 1px black; background-color:#d3d3d3; text-align:center">10th Card In Hand (if exists)
                    </div>
                </div> <!--end of bottomGameStatusBar-->             

This div is inside another container div:

            <div id="Mainboard" style="float:right; width:80%; overflow-y:auto; white-space: nowrap;text-align:center;">

All of this is at www.magicvsmachines.com/gameboardtest.html if you need the source for the parent divs

 

 

[jcanker]

Okay, removing the DIV around the text in the first block (the deck) makes them align properly in Chrome, but they're still messed up in IE....

[jcanker]

Yeah, there's something still forcing the first div, (the deck) to be higher than the others.  I've tried copying the style statement directly as it appears in the other divs, but it is still higher than the others.

[kicken]

You'd probably be better off just floating the divs rather than trying to use inline-block. I'd guess that the issue may be related to the whitespace between your div tags, but do not know for sure.

 

http://cssdesk.com/7wLnS

[jcanker]

That works for the alignment, but it forces divs down into a 2nd row if they extend past the right edge of the div when the window is resized.  I started using the inline-block in order to force them all on the same line.

 

Is there a way to keep the divs from wrapping?  I've tried putting them in a container with white-space:nowrap but that's not working.

[jcanker]

It seems to work if I use vertical-align:top in the CSS for each div and leave them as display:inline-block.

 

I'm still interested in a solution of floating the divs left but preventing them from wrapping.  There is a grid gameboard above this that also is using the display:inline-block to prevent wrapping when the window is resized but I'd prefer a float solution if possible.

[kicken]

Since your divs are all set to a fixed width/height, just make the container a fixed width/height that will enclose all of the divs.

 

http://cssdesk.com/7wLnS (updated)