Here is the code snippet I am working with:
http://jsfiddle.net/7jGHS/1299/
This is the HTML code:
<div class="text1"><h2><span>THIS IS A TEST</span></h2>
<p>1800 - 1570 - 000</p>
<h2><span>THIS IS A TEST</span></h2>
</div>
<div class="text2"><h2><span>THIS IS A TEST</span></h2>
<p>1800 - 1570 - 000</p>
<h2><span>THIS IS A TEST</span></h2>
</div>
This is the CSS code:
h2 { width:100%; text-align:center; border-bottom: 1px solid #000; line-height:0.1em; margin:10px 0 20px; }
h2 span { padding:0 10px; }
.text1{float:left;display:inline-block;width:50%;}
.text2{float:left;display:inline-block;width:50%;}
I am attempting to achieve the "----text----" effect but my text gets cut off and I don't want that.
I have made changes in the footer of the site and checked but the issue persists.
Can you please help me identify what is wrong with my code and how to fix this problem?
Thank you in advance!