How to display custom text in a new line? - html

Question

I want to show the text "You save ..." in a new line. I do not how to do. Please guide me. Please click for more details jsfiddle code
<div class="product-wrap first">
<div class="item">
<div class="product-image">Img area
</div>
<div class="product-content">
<div class="product-name"> <a class="fontcolor" href="#">Motorcycle Leather Boots (4Riders Boots Always)</a>
</div>
<div class="price-box">
<p class="special-price"><span class="price" id="product-price-77">£53.68</span>
</p>
<p class="old-price"><span class="price" id="old-price-77">£84.15</span>
</p> <span class="div-discount"><b>You save </b> <em><i>36.21</i><u>%</u></em></span>
</div>
<div class="clr"></div>
</div>
</div>
</div>

Answer 1

Make use of <br/> tag here! It breaks the line
DEMO
UPDATE
Add below properties to your .product-wrap .item .price-box class css
DEMO
.product-wrap .item .price-box {
margin-top: 6px;
overflow: hidden;
width:auto; //Set this
float:left; //and keep it float left
}

Answer 2

span.div-discount {
/* display: block; */
clear: left;
display: block;
}
just add this to your css it will work
here is the demo please look out
DEMO

Answer 3

Add Css
.div-discount b, .div-discount em{display:block;}

Answer 4

Your paragraphs are set to float, which is fine, but you will need to clear and wrap it in a div and set that div to block so it extends the fill width.
Then you want to set the div-discount class to block too.
CSS:
.amounts {
display: block;
}
.div-discount {
color: #b50016;
display: block;
}
.clr-both {
clear: both;
}
HTML:
<div class="amounts">
<p class="special-price"><span class="price" id="product-price-77">£53.68</span>
</p>
<p class="old-price"><span class="price" id="old-price-77">£84.15</span>
</p>
<div class="clr-both"></div>
</div>
<span class="div-discount"><b>You save </b> <em><i>36.21</i><u>%</u>
See jsFiddle

Answer 5

The b element in HTML stands for bold. Add the rule in CSS defines is display as inline. It means the elements which possess inline or inline-block properties will be shown on same line. So If we want to show our custom text on a new line, we have to change its style from display inline to display as block.
.div-discount b{ display:block;}