Clark Meshey Clark Meshey - 1 month ago 6
CSS Question

How do I center these two divs with the container being displayed inline-block?

I'm having trouble centering these two floated left divs into a container which has a height of auto and a display set to

inline-block
. I've given my container a max-width of 1600px and when the window is stretched wider than 1600px, the container stays pinned to the left. I tried text
align:center
, and
margin:0 auto
, on the container but I'm not getting the result I'm looking for.

Here is my code.



.keyfacts {
width: 94%;
height: auto;
max-width: 1600px;
padding: 60px 3% 60px 3%;
background-color: #634A4B;
display: inline-block;
}

.keyfactsleft {
float: left;
width: 47%;
height: auto;
padding-right: 3%;
}

.keyfactsleft p {
font-family: 'Raleway', san-serif;
font-size: 24px;
line-height: 32px;
font-weight: 100;
color: #58595b;
margin-bottom: 35px;
}

.keyfactsright {
float: left;
width: 50%;
height: 465px;
background-image: url(_images/meredith-manor-aerial.jpg);
background-size: cover;
background-position: center center;
background-color: #A05B5C;
}

<section class="keyfacts">
<div class="keyfactsleft">
<h3 class="red">When</h3>
<p>Saturday, October 14, 2017 at Five in the Evening</p>
<h3 class="red">Where</h3>
<p>Meredith Manor<br>2270 Pottstown Pike, Pottstown, PA 19465</p>
<p>Our convenient venue will host both our ceremony and our reception. Its location is only a few miles down the road from the Hilton Garden Inn, where you’ll be sleeping if you plan on getting wild and staying over.</p>
</div>
<div class="keyfactsright"></div>
</section>




Answer

see this working sample: https://jsfiddle.net/s8rL8e8v/ if your content has a height, you dont need to put height on your container div. just put overflow:hidden and it will cope all the content inside it and put some padding.

.keyfacts {
        width: 94%;
    max-width: 1600px;
    margin: 0 auto;
    overflow: hidden;
    padding: 60px 3% 60px 3%;
    background: #634A4B
}

.keyfactsleft {
    float: left;
    width: 47%;
    height: auto;
    padding-right: 3%;
}

.keyfactsleft p {
    font-family: 'Raleway', san-serif;
    font-size: 24px;
    line-height: 32px;
    font-weight: 100;
    color: #58595b;
    margin-bottom: 35px;
}

.keyfactsright {
    float: left;
    width: 50%;
    height: 465px;
    background-image: url(_images/meredith-manor-aerial.jpg);
    background-size: cover;
    background-position: center center;
    background-color: #A05B5C;
}
Comments