Gavin Reynoldson Gavin Reynoldson - 24 days ago 8
CSS Question

How to place text below boxes

I have placed two boxes next to each other and now I want to place some text directly underneath the boxes. The HTML/CSS I have so far keeps placing the text in the top right corner of the right hand box. Any suggestions?



<div id="one-off-pricing" style="width:800px;">

<div id="one-off-pricing-1" style="width:370px;height:400px;border: 1px solid #cecece;float:left;margin-left:270px;margin-top:20px;">

<div id="one-off-pricing-2" style="width:370px;height:400px;border: 1px solid #cecece;float:left;margin-left:370px;margin-top:-1px;">
</div>
</div>

<span style="font-weight:bold;"> *If for any reason we're unable to complete the job we'll give you a full refund, no questions asked.</span>
</div>




Answer

Use display: inline-block; on <span>.

Like:

span  {
  display: inline-block;
}

Have a look at the snippet below:

span {
  display: inline-block;
}
<div id="one-off-pricing" style="width:800px;">
    
    <div id="one-off-pricing-1" style="width:370px;height:400px;border:   1px solid #cecece;float:left;margin-left:270px;margin-top:20px;">
    
    <div id="one-off-pricing-2" style="width:370px;height:400px;border: 1px solid #cecece;float:left;margin-left:370px;margin-top:-1px;">
    </div>
   </div>
   
   <span style="font-weight:bold;"> *If for any reason we're unable to complete the job we'll give you a full refund, no questions asked.</span> 
    </div>

Hope this helps!