/    Sign up×
Community /Pin to ProfileBookmark

Horzontal Rule to left edge, but not right

Copy linkTweet thisAlerts:
Oct 28.2005

I’m trying to make a horizontal rule stay right up to the left edge of it’s container, but leave some room on the right side.

If I use “width:100%”, it fills the container to the left.

If I use “width:95%”, it stops before the right edge.

I also tried “width:95%; left:0; left-margin:0; left-padding:0;”, but I still can’t get it just right.

How do I make the <HR> butt up against the left, but leave space on the right?

Thanks.
-Jeff

to post a comment
CSS

5 Comments(s) ↴

Copy linkTweet thisAlerts:
@The_Little_GuyOct 28.2005 — try

margin-left:0px;

margin-right:10px;

or

margin-left:0px;

padding-right:10px;

or

padding-left:0px;

padding-right:10px;
Copy linkTweet thisAlerts:
@JSchwarzauthorOct 28.2005 — None of those work.

Here's a related question: how come the HR is going off the right side of the window? Even if I set the width to 100%, the right side of the HR is off the edge of the window (creating a horizontal scrollbar which wouldn't be there otherwise). My real goal is to prevent the HR from going off the right side.

Thanks,

-Jeff
Copy linkTweet thisAlerts:
@The_Little_GuyOct 28.2005 — change your "%" sign to "px"
Copy linkTweet thisAlerts:
@JSchwarzauthorOct 28.2005 — That only made the HR 100 pixels long. Still not what I need.
Copy linkTweet thisAlerts:
@drhowarddrfineOct 29.2005 — hr {width:90%; float:left}
×

Success!

Help @JSchwarz spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.16,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...