David Hope David Hope - 7 days ago 5
CSS Question

CSS: float left doesn't float the elements next to each other?

I've encountered an issue which doesn't make sense.

basically, I' trying to float 2 divs next to each other and I used

float:left;
in their CSS property but they don't float next to each other.

This is a working FIDDLE

This is my 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;
}


AND THIS IS MY 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>


Could someone please advise on this?

Answer

add float:left to this id #accor this will solve your problem

#accor {
   float:left;
}