Steve Price Steve Price - 1 month ago 18
CSS Question

Problems setting div content alignment

I want to add an infobar to a page. It contains three divs horizontally aligned and all content is currently floating left within them.
I'm trying to make the content of the center div align center and the right hand div align to the right, but nothing I try seems to be working. I've tried adding text-align:center to #delivery and text-align:right to #quickshop and I also tried float:right on #quickshop but they have no effect at all.
My html is

<div id="info-bar">
<div id="container">
<div id="quickquotes" class="info">
<i class="icon-quote"></i>
<div class="text-area">
Quick Quote Fast Response</div>
</div>

<div id="delivery" class="info">
<i class="icon-delivery"></i>
<div class="text-area">
Free UK Delivery on Orders Over £100</div>
</div>

<div id="quickshop" class="info">
<i class="icon-quickshop"></i>
<div class="text-area">
Quick Shop Search Product Codes</div>
</div>
</div>
</div>


The css is

#info-bar{
height: 46px;
}
#container{
margin:0 auto;
width:82%;
}
.info{
float:left;
width:37.5%;
margin:0;
padding: 9px 0;
display:flex;
flex-wrap: nowrap;
align-items: center;
}
#quickquotes.info{
width:28.5%;
}
#quickshop.info{
width:34%;
}
#container i {
font-size: 34px;
color: #a6d120;
display: inline-block;
vertical-align: middle;
}

#container i:before {
position:relative;
top:0px;
}
.icon-quote:before {content: url("http://placehold.it/35x27");}
.icon-delivery:before {content: url("http://placehold.it/35x27");}
.icon-quickshop:before {content: url("http://placehold.it/35x27");}

#container .text-area {
display: inline-block;
text-align: left;
margin-left: 0px;
color:#1e3e57;
letter-spacing:0.07em;
font-weight:bolder;
text-transform:uppercase;
font-size:0.8em;
}


I've set up a fiddle here so you can see a real world example of the problem. https://jsfiddle.net/qafru72o/2/
Where on earth am I going wrong here?!

GvM GvM
Answer

#info-bar{
height: 46px;
}
#container{
margin:0 auto;
width:82%;
}
.info{
float:left;
width:37.5%;
margin:0;
padding: 9px 0;
display:flex;
flex-wrap: nowrap;
align-items: center;
}
#quickquotes.info{
width:28.5%;
justify-content: flex-start;
}
#quickshop.info{
width:34%;
justify-content: flex-end;
} 
#delivery.info{
justify-content: center;
}
#container i {
font-size: 34px;
color: #a6d120;
display: inline-block;
vertical-align: middle;
}

#container i:before {
  position:relative;
  top:0px;
}
.icon-quote:before {content: url("http://placehold.it/35x27");}
.icon-delivery:before {content: url("http://placehold.it/35x27");}
.icon-quickshop:before {content: url("http://placehold.it/35x27");}

#container .text-area {
display: inline-block;
margin-left: 0px;
color:#1e3e57;
letter-spacing:0.07em;
font-weight:bolder;
text-transform:uppercase;
font-size:0.8em;
}
<div id="info-bar">
<div id="container">
<div id="quickquotes" class="info">
<i class="icon-quote"></i>
<div class="text-area">
Quick Quote Fast Response</div>
</div>

<div id="delivery" class="info">
<i class="icon-delivery"></i>
<div class="text-area">
Free UK Delivery on Orders Over £100</div>
</div>

<div id="quickshop" class="info">
<i class="icon-quickshop"></i>
<div class="text-area">
Quick Shop Search Product Codes</div>
</div>
</div>
</div>

is this what you need?