Inline blocks somehow don't get displayed in a straight line

Question

I'm creating a html newsletter to be sent by mail, and this is how far I came:

CSS

.kasten {
    color: #000;
    display: inline-block;
    border-size: 1px;
    border-style: solid;
    border-radius: 10px;
    border-color: #493c2a;
    margin: 7px;
    padding: 0px;
    box-shadow: 0px 0px 10px #222;
    width: 300px;
    height: 300px;
    text-decoration: none;
}

HTML

<div class="kurse">
    <a class="kasten" href="#">
        <!-- content -->    
    </a>
    <a class="kasten" href="#">
        <!-- content -->    
    </a>
    <a class="kasten" href="#">
        <!-- content -->    
    </a>
</div>

The problem is, the blocks don't get displayed in a single line, but rather with some kind of "bumps".

Does anyone know how to fix this?

TL;NR. You should cut this example to a readable size. – Rafael Winterhalter Aug 21 '13 at 17:54 — Rafael Winterhalter, Aug 21 '13 at 17:54

score 4 · Accepted Answer · answered Aug 21 '13 at 18:02

4

You need to align it to the top

.kasten {
    vertical-align: top;
}

http://jsfiddle.net/Gh5ez/2/

answered Aug 21 '13 at 18:02

Huangism

16,278
7
48
74

score 1 · Answer 2 · answered Aug 21 '13 at 18:46

1

When you say mail, do you mean email? If so then have a look at the link below. Its a guild for CSS support in emailers.

http://www.campaignmonitor.com/css/

answered Aug 21 '13 at 18:46

James Nicholson

987
10
20

score 0 · Answer 3 · answered Aug 21 '13 at 18:00

0

You could remove display:inline-block and add in float:left

.kasten {
  color: #000;
  float:left;
  border-size: 1px;
  border-style: solid;
  border-radius: 10px;
  border-color: #493c2a;
  margin: 7px;
  padding: 0px;
  box-shadow: 0px 0px 10px #222;
  width: 300px;
  height: 300px;
  text-decoration: none;
}

I've made a jsfiddle with the fix

answered Aug 21 '13 at 18:00

Justin Sync Favaloro

15
1
2

Just on a side note if you making an email template you should actually use tables (ewww) instead of divs – Justin Sync Favaloro Aug 21 '13 at 18:53

Inline blocks somehow don't get displayed in a straight line

3 Answers3