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>

ust add `position: absolute` to .`previewbox` – Tushar Gupta Mar 03 '15 at 12:18 — Tushar Gupta, Mar 03 '15 at 12:18

score 3 · Accepted Answer · answered Mar 03 '15 at 12:17

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>

score 2 · Answer 2 · answered Mar 03 '15 at 12:13

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;

answered Mar 03 '15 at 12:13

Marwelln

28,492
21
93
117

score 0 · Answer 3 · answered Mar 03 '15 at 12:15

0

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

answered Mar 03 '15 at 12:15

OddDev

3,644
5
30
53

score 0 · Answer 4 · answered Mar 03 '15 at 12:15

0

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;
}

answered Mar 03 '15 at 12:15

Rashmin Javiya

5,173
3
27
49

score 0 · Answer 5 · edited Mar 04 '15 at 01:19

0

Add this property also that will help you:

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

edited Mar 04 '15 at 01:19

Leandro Carracedo

7,233
2
44
50

answered Mar 03 '15 at 12:17

user3074446

124
10

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

5 Answers5