CSS 3 verschieden hohe divs nebeneinander verrutschen in der Höhe (?)

[CitroenDsVier]

Hallo zusammen,

ich habe drei verschieden Hohe divs, die nebeneinander angeordnet sind (per inline-block). Diese sind aber zu bestimmten Zeiten unterschiedlich hoch. Hierbei passiert es in FF wie in Edge, dass das weniger hohe div runterrutscht, also am unteren Ende bündig mit den anderen divs ist, nicht aber am oberen Ende. Wie kann ich das beheben?

Des weiteren rutscht div3 alle Nase lang in die zweite Reihe, obwohl mit jeweils 33% width ja genug Platz sein müsste. Kennt das Problem Jemand?

<div class="table">Inhalt</div>
<div class="table">Inhalt 2</div>
<div class="table">Inhalt 3</div>

div.table {
	width: 33%;
	max-width: 33%;
	display: inline-block;
	margin-top: 35px;
	text-align: center;
}

Kann mir Jemand helfen? Anbei meine paint-Künste des Problems...

MfG, V40

Ergänzung (13. September 2017)

Nachtrag: beide Probleme behoben, man nehme float: left anstatt inline-blocks... Mein Fehler

 

[Webentwickler]

Mit Flexbox erreicht man das von dir gewünschte Verhalten super einfach:

https://jsfiddle.net/q015y05d/

Entscheidend ist hier die Property align-items des Containers, die bestimmt, wie die Items auf der Y-Achse ausgerichtet werden. Mit der Property align-self überschreibt man dies für ein Item und richtet dieses individuell auf der Y-Achse des Containers aus.

Imho ist Flexbox viel einfacher, prägnanter und mit weniger Code verbunden als ein Float-Layout.

https://caniuse.com/#search=flexbox

Und wie man sieht zieht das Argument, dass die Browser es nicht gut oder verschieden umsetzen nicht (mehr), alle bis auf den Sonderfall IE können es sehr gut.

 

[CitroenDsVier]

Das ist interessant, habe ich noch nicht gehört. Vielen Dank für den Tipp!

 

[Teisi]

dann kannst du dir ja schon auch gleich mal mit css3 grid beschäftigen
Flexbox ohne prefix kann ich noch nicht empfehlen. Zumindest nicht in größeren Projekten...

Das sollte dir aber helfen: http://the-echoplex.net/flexyboxes/