Solved

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

Posted on 2016-09-28
4
37 Views
Last Modified: 2016-09-28
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
Comment
Question by:MOSTAGHASSI
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
4 Comments
 
LVL 35

Expert Comment

by:Terry Woods
ID: 41819479
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
 

Assisted Solution

by:CWareIndia
CWareIndia earned 250 total points
ID: 41819484
Add the following to your CSS to fix this.  

box-sizing: border-box;
1
 
LVL 3

Accepted Solution

by:
pradeep kumar earned 250 total points
ID: 41819548
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
 

Author Closing Comment

by:MOSTAGHASSI
ID: 41819621
Thanks for both solutions.
0

Featured Post

Technology Partners: 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!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
This article discusses four methods for overlaying images in a container on a web page
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …

752 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question