It's so frustrating... can someone please explain why the center column won't align between the left and right columns? I've been trying to use margin: 0 auto; on the center column but it's not working.
$(document).ready(function(){
$("#hide-show").click(function(){
$("#panel").slideToggle();
});
}); .main-wrapper{
margin: 0 auto;
width: 70%;
}
#panel{
width: 100%;
background-color: aqua;
display: none;
position: relative;
float: left;
}
.wrapper{
width: 100%;
}
.images{
width: 100%;
}
#img-1{
background: url("http://lorempixel.com/output/people-q-c-640-480-1.jpg") no-repeat center;
background-size:contain;
height: 300px;
width: 100%;
}
.col {
width: 32%;
float: left;
overflow: hidden;
background: red;
border: 2px solid black;
}
.col:last-child{
float: right;
}
#testing{
background: yellow;
margin: 0 auto;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><br />
<div class="main-wrapper"><br />
<button id="hide-show" name="Click me">Click me</button><br />
<div id="panel"><br />
<div class="wrapper"><br />
<div class="col"><br />
<p>Hello world! 2</p><br />
<div id="img-1" class="images"></div><br />
</div><br />
<div class="col" id="testing"><br />
<p>Hello world! 3</p><br />
</div><br />
<div class="col"><br />
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit veniam quisquam, rem illum dicta cumque, voluptate fugiat impedit<br />
beatae rerum ratione, voluptates nisi voluptate fugiat consectetur adipisicing elit. Suscipit veniam quisquam, rem illum dicta cumque,<br />
voluptate fugiat impedit beatae rerum ratione, voluptates nisi voluptate fugiat consectetur adipisicing elit. Suscipit veniam quisquam,<br />
rem illum dicta cumque, voluptate fugiat impedit beatae rerum ratione. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit veniam quisquam, rem illum dicta cumque, voluptate fugiat impedit<br />
beatae rerum ratione, voluptates nisi voluptate fugiat consectetur adi</p><br />
</div><br />
</div><br />
</div>
<p>Hello world! 4</p>
</div>If you have a moment, here is the JSFiddle link: JSFiddle
Thanks in advance!