Savagery Digital Savagery Digital - 6 months ago 25
CSS Question

How do I achieve horizontally aligned, gap-less, and centered div elements in container div

I have 3 elements that I would like to align horizontally, without gaps in between, and centered. I've accomplished lining them up horizontally and equally spaced, but want the touching, ie, to not have white space between them but to also take up 100% width of the page. This is generic html but applies to what I've done on my actual page:

CSS:

.content{
width: 100%;
height: 400px;
background-color:white;
text-align: justify;


}
.content .featureitem{

height: 100%;
width: 33%;
display: inline-block;
background-color:bisque;
margin: 0;


}

.content:after{
content: "";
width: 100%;
display: inline-block;
}


HTML:

<div class="content">
<div class="featureitem"></div>
<div class="featureitem"></div>
<div class="featureitem"></div>
</div>


I've tried using display:flex, but that leaves a gap on the right hand side. I want to achieve a row of 3 divs, that span 100% of the width with no gaps in between.

Answer

You can achieve this by removing the display: inline-block and adding float: left. Also you should consider calculating your width, since 3*33% != 100%:

.content .featureitem{ 
    height: 100%;
    width: calc(100%/3);
    //display: inline-block;
    float: left;
    background-color:bisque;
    margin: 0;
}

Fiddle