Someone Someone - 6 months ago 9
HTML Question

Can't seem to get each div table box to have the same equal height

More or less, working on a table through CSS and divs and have it mostly set, except for some reason the height isn't uniform and changes for each box. Have tried various height changes and commands with no luck. Not sure if the issue is with the CSS below or a conflict with some of the other CSS coding.

CSS:

.collection{
width:600px;
border-collapse:collapse;
}
.collection td{
padding:5px;
}
.collection-box{
border-style:solid;
border-width:2px 2px;
border-color:#29FDF1;
background: rgba(11, 14, 15, .65)
height:100%;
display:inline-block;
padding:5px 5px;
}
.collection-innerbox{
display:inline-block;
background: rgba(11, 14, 15, .65)
text-align:center;
width:200px;
height:200px;
}
.collection-text{
text-align:center;
}


JSFiddle
Full site's CSS on Pastebin

Answer

Change the vertical-align value to top and add a 100% height to the main inner div and it works :)

.collection td { vertical-align: top; }
.collection-box { height: 100% }

Fiddle here

Note : Be careful, you forgot a comma after your background value here :

.collection-innerbox{
    display:inline-block;
    background: rgba(11, 14, 15, .65)
    text-align:center;
    width:200px;
    height:200px;
}