CSS display: inline-block will nicht

[Hugo Stiglitz]

Hallo Liebe CB-Gemeinde!

Ich habe folgendes Problem:

Ich möchte zwei div's nebeneinander stehen haben. Die besagten zwei div's befinden sich in einem "parent"-div, welcher folgende Attribute besitzt:

.main {
background-color: #333333;
height: 100%;
width: 100%;	
margin-top: 85;
position: absolute;	
z-index: 1;
white-space: nowrap;
vertical-align: top;
}

Soweit so gut. Die beiden anderen div's, welche innerhalb von ".main"-div sind, besitzen folgende Attribute:

.mainMenu {
height: 400;
width: 15%;
min-width: 200px;
background-color: black;
margin-left: 20;
margin-top: 20;
display: inline-block;
-webkit-border-radius: 25px;
border-radius: 25px;
padding: 15;
-webkit-box-shadow: 5px 5px 15px black;
box-shadow: 5px 5px 15px black;
border: 1px solid black;
}

und

.mainBox {
background-color: black;
height: 90%;
width: 75%;	
min-width: 600px;
display: inline-block;	
margin-top: 20;
margin-left: 20;
-webkit-border-radius: 25px;
border-radius: 25px;
padding: 15px;
-webkit-box-shadow: 5px 5px 15px black;
box-shadow: 5px 5px 15px black;
border: 1px solid black;
}

Grundsätzlich funktioniert das ja auch ganz gut. Nur, wenn nun zum Beispiel im ersten div sich text befindet, rutscht der zweite div hinunter. Wenn nun gleich viel Text in beiden div's ist, stimmts wieder und beide Container sind schön in einer höhe nebeneinander. Ich kann leider keinen Screenshot posten, aber ich hoffe ihr könnt mir so helfen.

Was noch gesagt werden "muss": Ich bevorzuge diese Methode anstatt dem "float:left"-zeugs.

BG Hugo Stiglitz

edit: Screenshot

 

[WhiteShark]

Ich empfehle die Verwendung der Entwicklertools. Lassen sich mit Rechtsklick+"Element untersuchen" oder mit F12 öffnen.
Dann sieht man auch sehr gut welche CSS-Eigenschaften fehlerhaft sind und nicht greifen.

Du hast bspw bei einigen Einheiten (padding, margin) die px-Angabe vergessen. Hauptproblem dürften aber die fehlenden px bei der height von .mainMenu sein.

Edit: vertical-align:top muss auf die inneren divs, nicht auf das parent.

 

[Hugo Stiglitz]

Hallo. Gibt es so etwas wie die Entwicklertools unter Safari bzw. mac osx ?

Ich habe eben die px-Angaben gemacht. Ergibt aber leider keinen Unterschied.

BG Hugo Stiglitz

 

[blablub1212]

Darf ich fragen, warum du kein bootstrap nutzt? Das nimmt dir mit dem Grid-System nämlich genau solche Geschichten ab und macht deine Seite gleich noch responsiv.

 

[WhiteShark]

Hallo. Gibt es so etwas wie die Entwicklertools unter Safari bzw. mac osx ?

Ja gibt es auch, aber die müssen erst aktiviert werden:
http://praxistipps.chip.de/safari-entwicklertools-aktivieren-so-funktionierts_27403

Wenn man programmieren will, ist es wichtig zu lernen Lösungen zu finden und eine Suchmachine zu benutzen.
Oben genannter Link ist bspw das erste Ergebnis wenn man nach "safari entwicklertools" sucht.
Bei Programmierproblemen empfiehlt es sich auf englisch zu suchen. Stackoverflow ist auch ne gute Anlaufstelle.

Ich habe eben die px-Angaben gemacht. Ergibt aber leider keinen Unterschied.

Siehe meinen Edit:
vertical-align:top muss auf die inneren divs, nicht auf das parent.

 

[Hugo Stiglitz]

@WhiteShark
Habe ich gerade gesehen bei den Google Suchergebnissen - war ich etwas voreilig mit meinem Kommentar.

Ich habe zuvor - selbstverständlich - Suchmaschinen verwendet, aber ich habe keine passende Lösung bzw. einen passenden Denkanstoß gefunden. Jetzt wo ich die Antwort von dir sehe, ist es mir wieder eingeleuchtet mit "vertical-align: top".
Mache ja solche Sachen nicht zum ersten Mal. Vielen lieben Dank!

Von bootstrap habe ich bereits gehört. Ich werde mich damit in nächster Zeit bestimmt einmal auseinander setzen. Danke für den Hinweis.