Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 47
  • Last Modified:

While text-align is right padding-right does not affect,why?

Hello,

I have a div and its css but padding-right does not affect,you can see its fiddle in this link:

https://jsfiddle.net/jamshidi/fj41mt5w/

Thanks for your help
0
MOSTAGHASSI
Asked:
MOSTAGHASSI
2 Solutions
 
Terry WoodsIT GuruCommented:
It seems that the width set to 100% adding padding to the right pushes the width of the div out to be larger than the viewport width.

See what it looks like now that I've added a border:
https://jsfiddle.net/85z6toqm/
0
 
CWareIndiaCommented:
Add the following to your CSS to fix this.  

box-sizing: border-box;
1
 
pradeep kumarSr. UI Developer Commented:
just change the float to right or "box-sizing: border-box;" as suggest by cwareindia also good solution.

.article-detail-section-name{
	width:100%;
	height:auto;
	float:right;
	text-align:right;
	font-family:Tahoma;
	font-size:18px;
	padding-right:85px;
	margin-top:50px;

}

Open in new window

0
 
MOSTAGHASSIAuthor Commented:
Thanks for both solutions.
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Tackle projects and never again get stuck behind a technical roadblock.
Join Now