✔ CSS div untereinander Problem

[silizius]

Hallo Leute ich hab da bei meinem Layout ein kleines Problem, habe an einer position im layout 3 divs.
1 Box div und 2 die darin angelegt sind. Die 2 inneren lassen sich einfach nicht untereinander positionieren.

<div class="order">
     <div class="innerdiv">lorem
     </div>
     <div class="innerdiv">ipsum
     </div>
</div>

hier mal der code, hoffe jemand kann helfen:
Notiz: ist nur ein Ausschnitt, wenn ich den restlichen css code der in den divs ist entferne habe ich noch immer das Problem

div.order{							
							position:relative;
							z-index: 10;        
							top: 170px;
							bottom: 80px;
}

div.innerdiv		{	
							margin-bottom: 5px;
                                                        padding-top: 1px;
							padding-bottom: 2px;
							padding-left: 5px;
							padding-right: 5px;			
							display:inline;
							max-width:196px;
						}

Um die position:relative im order div komm ich leider nicht rum. Hoffe jemand hat ne Lösung

LG Tom

 

[iBirne]

Mach es doch einfach so:

<div class="order">
     <div class="innerdiv">lorem
     </div>
  <br>
     <div class="innerdiv">ipsum
     </div>
</div>

 

[silizius]

hi danke dir für die rasche antwort hatte das jetzt so mit dem <br> gemacht und das hat mich beim betrachten des ergebnisses auf eine andre Idee gebracht:

hab um die jeweiligen innerdiv objekte noch ein div gesetzt das mir den margin zum nächsten angibt.

somit setzt er diese untereinander und die inneren bleiben mit display:inline von der größe her begrenzt

Danke nochmals :=)

LG Tom

 

[HoB]

Einfach display: inline; weg. Du willst das ja nicht inline haben Und mit br macht man sowas nicht Habe die Blöcke zusätzlich rot markiert, damit man es besser sieht

div.order{                          
                            position:relative;
                            z-index: 10;        
                            top: 170px;
                            bottom: 80px;
}
 
div.innerdiv        {   
                            margin-bottom: 5px;
                            padding-top: 1px;
                            padding-bottom: 2px;
                            padding-left: 5px;
                            padding-right: 5px;         
                            background-color:red;
                            max-width:196px;
                        }