Div overflow with display table-cell

Question

I have a number of divs inside another div trying to make a "bbokshelf". In order to align the "books" divs bottom, I'm using the display:table-cell css property, and the cointainer width at 100%, but when the inside divs fills the container, they start overflowing. Is there a way to make them appear in rows, like floating them or something? float: left did not work. The HTML:

<div class="magazinebookcase">
    <div class="books">
    <a style="height:286px;width:16px;" href="">
            <div class="rotate">Book 9</div>
    </a>
    </div>
            <div class="books">
    <a style="height:258px;width:48px;" href="">
            <div class="rotate">Book 10</div>
    </a>
    </div>
            <div class="books">
    <a style="height:252px;width:38px;" href="">
            <div class="rotate">Book 11</div>
    </a>
    </div>
            <div class="books">
    <a style="height:254px;width:34px;" href="">
            <div class="rotate">Book 12</div>
    </a>
    </div>
            <div class="books">
    <a style="height:258px;width:36px;" href="">
            <div class="rotate">Book 13</div>
    </a>
    </div>
            <div class="books">
    <a style="height:258px;width:50px;" href="">
            <div class="rotate">Book 14</div>
    </a>
    </div>
            <div class="books">
    <a style="height:254px;width:52px;" href="">
            <div class="rotate">Book 15</div>
    </a>
    </div>
            <div class="books">
    <a style="height:256px;width:72px;" href="">
            <div class="rotate">Book 16</div>
    </a>
    </div>
            <div class="books">
    <a style="height:258px;width:38px;" href="">
            <div class="rotate">Book 17</div>
    </a>
    </div>
            <div class="books">
    <a style="height:252px;width:40px;" href="">
            <div class="rotate">Book 18</div>
    </a>
    </div>
            <div class="books">
    <a style="height:256px;width:46px;" href="">
            <div class="rotate">Book 19</div>
    </a>
    </div>
            <div class="books">
    <a style="height:284px;width:14px;" href="">
            <div class="rotate">Book 20</div>
    </a>
    </div>
            <div class="books">
    <a style="height:252px;width:42px;" href="">
            <div class="rotate">Book 21</div>
    </a>
    </div>
            <div class="books">
    <a style="height:256px;width:44px;" href="">
            <div class="rotate">Book 22</div>
    </a>
    </div>
            <div class="books">
    <a style="height:256px;width:44px;" href="">
            <div class="rotate">Book 23</div>
    </a>
    </div>
            <div class="books">
    <a style="height:262px;width:60px;" href="">
            <div class="rotate">Book 24</div>
    </a>
    </div>
            <div class="books">
    <a style="height:284px;width:14px;" href="">
            <div class="rotate">Book 25</div>
    </a>
    </div>
            <div class="books">
    <a style="height:256px;width:40px;" href="">
            <div class="rotate">Book 26</div>
    </a>
    </div>
            <div class="books">
    <a style="height:254px;width:58px;" href="">
            <div class="rotate">Book 27</div>
    </a>
    </div>
            <div class="books">
    <a style="height:256px;width:40px;" href="">
            <div class="rotate">Book 28</div>
    </a>
    </div>
            <div class="books">
    <a style="height:257px;width:41px;" href="">
            <div class="rotate">Book 29</div>
    </a>
    </div>
            <div class="books">
    <a style="height:258px;width:40px;" href="">
            <div class="rotate">Book 30</div>
    </a>
    </div>
            <div class="books">
    <a style="height:256px;width:34px;" href="">
            <div class="rotate">Book 31</div>
    </a>
    </div>
            <div class="books">
    <a style="height:256px;width:42px;" href="">
            <div class="rotate">Book 32</div>
    </a>
    </div>
            <div class="books">
    <a style="height:256px;width:44px;" href="">
            <div class="rotate">Book 33</div>
    </a>
    </div>
            <div class="books">
    <a style="height:254px;width:40px;" href="">
            <div class="rotate">Book 34</div>
    </a>
    </div>
            <div class="books">
    <a style="height:256px;width:40px;" href="">
            <div class="rotate">Book 35</div>
    </a>
    </div>
            <div class="books">
    <a style="height:252px;width:42px;" href="">
            <div class="rotate">Book 36</div>
    </a>
    </div>
            <div class="books">
    <a style="height:256px;width:44px;" href="">
            <div class="rotate">Book 37</div>
    </a>
    </div>
            <div class="books">
    <a style="height:256px;width:34px;" href="">
            <div class="rotate">Book 38</div>
    </a>
    </div>
            <div class="books">
    <a style="height:256px;width:36px;" href="">
            <div class="rotate">Book 39</div>
    </a>
    </div>
            <div class="books">
    <a style="height:252px;width:26px;" href="">
            <div class="rotate">Book 40</div>
    </a>
    </div>
            <div class="books">
    <a style="height:256px;width:34px;" href="">
            <div class="rotate">Book 41</div>
    </a>
    </div>
            <div class="books">
    <a style="height:256px;width:50px;" href="">
            <div class="rotate">Book 42</div>
    </a>
    </div>
            <div class="books">
    <a style="height:258px;width:48px;" href="">
            <div class="rotate">Book 43</div>
    </a>
    </div>
            <div class="books">
    <a style="height:258px;width:46px;" href="">
            <div class="rotate">Book 44</div>
    </a>
    </div>
            <div class="books">
    <a style="height:256px;width:60px;" href="">
            <div class="rotate">Book 45</div>
    </a>
    </div>
        <div class="clearfix"></div>
</div>

The CSS:

.magazinebookcase {
width: 100%;
padding: 3px;
float:left;
} 

.magazinebookcase .clearfix {
clear:both;
}

.magazinebookcase .books {
display: table-cell;
vertical-align: bottom;
text-align:center;
}

.magazinebookcase a {
border: 1px solid #000;
display: block;
font-size: 0.7em;
}

.magazinebookcase a:hover {
background-color: #ccc;
}

.rotate {
-moz-transform: rotate(270deg);
-moz-transform-origin: 50% 50%;
-webkit-transform: rotate(270deg);
-webkit-transform-origin: 50% 50%;
position: relative;
top: 50%;
}

http://jsfiddle.net/b8K7u/

Wez · Accepted Answer · 2012-11-05 14:26:41Z

2

Instead of display: table-cell; try display: inline-block;

like so.

.magazinebookcase .books {
display: inline-block;
vertical-align: bottom;
text-align:center;
}

http://jsfiddle.net/b8K7u/1/

answered Nov 5, 2012 at 14:26

Wez

10.8k5 gold badges52 silver badges65 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

eh9 · Accepted Answer · 2012-11-05 14:30:46Z

0

The problem you're having is that to get your books narrow, you're using a narrow width. That width, though, is inherited by the element with the book title. That element though, is displayed after a rotation, but it's width is still narrow. In other words, the width is relative to the local coordinate system (which is the only way to do it when rotations are not multiples of 90 degrees).

answered Nov 5, 2012 at 14:30

eh9

7,45824 silver badges44 bronze badges

Collectives™ on Stack Overflow

Div overflow with display table-cell

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related