Question

I have a layout built using CSS display:table (inline, row, cell, etc). I’m doing local development on it with apache, and when I refresh the page, two of the div containers are incorrectly lined up. However, if I uncheck and re-check display:table-row, they correct themselves, and the page displays correctly.

http://jsfiddle.net/fNNKT/

You can see the HTML and CSS at the jsFiddle above. It’s actually not working there either, so maybe I’m doing something wrong, and can use help with that.

                <div class="cabinet-container">
                <div class="mode-bar">
                    <div class="mode-bar-left">
                        <div class="mode-bar-item">logo</div>
                        <div class="mode-bar-item active">Dispense</div>
                        <div class="mode-bar-item">Inventory</div>
                    </div>
                    <div class="mode-bar-right schedule">
                        <div class="mode-bar-item">Sign-Out</div>
                    </div>
                </div>
                    <div class="table"></div>
                    <div class="left-container"></div>
                    <div class="center-container">
                        <div class="search-container">
                            <div class="table-cell">
                                <div class="search-field"></div>
                            </div>
                        </div>
                        <div class="nav-button-center-container">
                            <div class="table-cell">
                            </div>
                        </div>
                        <div class="list">
                            <div class="table-cell">
                                <div class="list-item-center-container"></div>
                                <div class="list-item-center-container"></div>
                                <div class="list-item-center-container-partial"></div>
                            </div>
                        </div>
                        <div class="nav-button-center-container-down-active">
                            <div class="table-cell"></div>
                        </div>
                    </div>
                    <div class="footer">
                        <div class="button-group table-border-5">
                            <div class="button-secondary">Dispense Non-Drug</div>
                            <div class="button-secondary">Sort By: Last Name</div>
                        </div>
                        <div class="button-group-right table-border-5">
                            <div class="button-primary">New Clinical Order</div>
                        </div>
                    </div>
            </div>​

Answer 1

Is your question related to .mode-bar-left and .mode-bar-right wrapping onto two lines? If so, the problem relates to whitespace. Think of two images displayed inline, side by side. If there’s whitespace between the tags in the code, there will be whitespace displayed in the browser.

Solution #1:
Take your logic one level higher up in the DOM. Change the display value for both mode-bar elements to table-cell (instead of the current inline-table). Then change the .mode-bar-item elements to display: inline-block (instead of table-cell).

Solution #2:
A faster, less elegant solution is to add float: left to .mode-bar-left.

On the topic of elegance, I strongly recommend that you consider some more semantically meaningful tags than just div. For example, .mode-bar-left is clearly a list (ul perhaps?) and the .mode-bar-item elements are clearly list items (li).