div has empty space on top with display:inline-block

Question

I'm trying to position two divs .cardbox, .previewbox in a container .cardcontainer next to each other with display:inline-block; For some reason the div on the right side .previewbox has some empty space on top of it that I have no idea how to get rid of. Both divs contain images. I've tried tinkering with the width and height settings thinking they are too large for the box, but nothing seems to get it right. Any help or imput is greatly appreciated.

.cardcontainer {
    margin:auto;
    width:1260px;
    height:630px;
    border-radius: 3px;
    background-color:white;
    background-image: url("images/program/cardbox.jpg");
    background-repeat:no-repeat;
    background-size:100%;
    overflow:auto;
}
.cardbox {
    height:630px;
    width:895px;
    display:inline-block;
    overflow:auto;
    border-radius:3px;
    border: 1px solid black;
}
.previewbox {
    height:605px;
    width:340px;
    display:inline-block;
    border-radius:3px;
    border:1px solid black;
}
.card {
    border: 4px solid white;
    width:141px;
    height:200px;
    border-radius: 3px;
    display:inline-block;
}
.cardpreview {
    width:300px;
    height:446px;
}

        <div class="cardcontainer">
            <div class="cardbox">
                <img class="card" alt="card missing" src="http://mtgimage.com/card/cardback.jpg" 
                /><img class="card" alt="card missing" src="http://mtgimage.com/card/cardback.jpg" 
                /><img class="card" alt="card missing" src="http://mtgimage.com/card/cardback.jpg" 
                /><img class="card" alt="card missing" src="http://mtgimage.com/card/cardback.jpg" 
                /><img class="card" alt="card missing" src="http://mtgimage.com/card/cardback.jpg" 
                /><img class="card" alt="card missing" src="http://mtgimage.com/card/cardback.jpg" 
                /><img class="card" alt="card missing" src="http://mtgimage.com/card/cardback.jpg" 
                /><img class="card" alt="card missing" src="http://mtgimage.com/card/cardback.jpg" 
                /><img class="card" alt="card missing" src="http://mtgimage.com/card/cardback.jpg" 
                /><img class="card" alt="card missing" src="http://mtgimage.com/card/cardback.jpg" 
                /><img class="card" alt="card missing" src="http://mtgimage.com/card/cardback.jpg" 
                /><img class="card" alt="card missing" src="http://mtgimage.com/card/cardback.jpg" 
                /><img class="card" alt="card missing" src="http://mtgimage.com/card/cardback.jpg" 
                /><img class="card" alt="card missing" src="http://mtgimage.com/card/cardback.jpg" 
                /><img class="card" alt="card missing" src="http://mtgimage.com/card/cardback.jpg" />
            </div
            ><div class="previewbox"
                  ><img class="cardpreview" alt="card missing" src="http://mtgimage.com/card/cardback.jpg" />
            </div>
        </div>

Answer 1

just add position: absolute to .previewbox

.cardcontainer {
    margin:auto;
    width:1260px;
    height:630px;
    border-radius: 3px;
    background-color:white;
    background-image: url("images/program/cardbox.jpg");
    background-repeat:no-repeat;
    background-size:100%;
    overflow:auto;
}
.cardbox {
    height:630px;
    width:895px;
    display:inline-block;
    overflow:auto;
    border-radius:3px;
    border: 1px solid black;
}
.previewbox {
  position:absolute;
    height:605px;
    width:340px;
    display:inline-block;
    border-radius:3px;
    border:1px solid black;
}
.card {
    border: 4px solid white;
    width:141px;
    height:200px;
    border-radius: 3px;
    display:inline-block;
}
.cardpreview {
    width:300px;
    height:446px;
}

        <div class="cardcontainer">
            <div class="cardbox">
                <img class="card" alt="card missing" src="http://mtgimage.com/card/cardback.jpg" 
                /><img class="card" alt="card missing" src="http://mtgimage.com/card/cardback.jpg" 
                /><img class="card" alt="card missing" src="http://mtgimage.com/card/cardback.jpg" 
                /><img class="card" alt="card missing" src="http://mtgimage.com/card/cardback.jpg" 
                /><img class="card" alt="card missing" src="http://mtgimage.com/card/cardback.jpg" 
                /><img class="card" alt="card missing" src="http://mtgimage.com/card/cardback.jpg" 
                /><img class="card" alt="card missing" src="http://mtgimage.com/card/cardback.jpg" 
                /><img class="card" alt="card missing" src="http://mtgimage.com/card/cardback.jpg" 
                /><img class="card" alt="card missing" src="http://mtgimage.com/card/cardback.jpg" 
                /><img class="card" alt="card missing" src="http://mtgimage.com/card/cardback.jpg" 
                /><img class="card" alt="card missing" src="http://mtgimage.com/card/cardback.jpg" 
                /><img class="card" alt="card missing" src="http://mtgimage.com/card/cardback.jpg" 
                /><img class="card" alt="card missing" src="http://mtgimage.com/card/cardback.jpg" 
                /><img class="card" alt="card missing" src="http://mtgimage.com/card/cardback.jpg" 
                /><img class="card" alt="card missing" src="http://mtgimage.com/card/cardback.jpg" />
            </div
            ><div class="previewbox"
                  ><img class="cardpreview" alt="card missing" src="http://mtgimage.com/card/cardback.jpg" />
            </div>
        </div>

Answer 2

What you need to do is to position them at the top with vertical-align.

Use this on .previewbox and .cardbox:

vertical-align:top;

Answer 3

You've given your ".cardcontainer" a fixed height. The ".previewbox" is anchored to the bottom of its container. I would recommend to get rid of this fixed height otherwise you can do

vertical-align: top

Answer 4

Add float: left in cardbox css class

.cardbox {
    height: 630px;
    width: 895px;
    display: inline-block;
    overflow: auto;
    border-radius: 3px;
    border: 1px solid black;
    float: left;
}

Answer 5

Add this property also that will help you:

.cardbox {   
    float: left;
}
.previewbox {   
    float: left;
}