CSS: float left schwimmt nicht die Elemente nebeneinander?

Question

Ich habe ein Problem festgestellt, das keinen Sinn ergibt.

grundsätzlich versuche ich 2 divs nebeneinander zu schweben und ich habe float:left; in ihrer CSS-Eigenschaft verwendet, aber sie schwimmen nicht nebeneinander.

Dies ist ein Arbeits FIDDLE

Das ist mein CSS:

button.accordion { 
    background-color: #eee; 
    background-image:url(images/platenav-bg.png); 
    background-repeat:repeat; 
    color: #FFF; 
    cursor: pointer; 
    height:30px; 
    width: 220px; 
    border: none; 
    text-align: left; 
    outline: none; 
    font-size: 12px; 
    transition: 0.4s; 
    font-weight:bold; 
    padding-left:5px; 
} 

button.accordion.active, button.accordion:hover { 
    background-color: #ddd; 
} 

button.accordion:after { 
    content: '\02795'; 
    font-size: 13px; 
    color: #fff; 
    float: right; 
    margin-left: 5px; 
} 

button.accordion.active:after { 
    content: "\2796"; 
    color:#FFF; 
} 
div.panel { 
    background-color: white; 
    max-height: 0; 
    overflow: hidden; 
    transition: 0.6s ease-in-out; 
    opacity: 0; 
} 

div.panel.show { 
    opacity: 1; 
    max-height: 500px; 
} 

und dies ist mein HTML:

<div style="width:100%;"> 

<div id="accor" style="width:220px; margin-top:10px;"> 
<button id="ureg" class="accordion">1 </button> 
<div class="panel"> 

<p>Lorem ipsum...</p> 
</div> 

<button class="accordion">2 </button> 
<div class="panel"> 
    <p>Lorem ipsum...</p> 
</div> 

<button class="accordion">BORDER</button> 
<div class="panel"> 
    <p>3 </p> 
</div> 

</div> 



<div style="width:200px; margin-top:10px; float:left; background-color:#000; height:200px;"> 


</div> 

</div> 

Könnte jemand bitte dies mitteilen?

Answer 1

add float:left dieser ID #accor dies Ihr Problem

#accor { 
    float:left; 
} 

lösen