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:

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

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/

Div overflow with display table-cell

Answers (2)

Related Questions