CODEWITHSUNDEEP
htmlcss
test
test

Reputation: 18200

Padding not 0 on float:right

I'm trying to make an image go ALL the way right on a DIV but it's not happening:\

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style>* { margin:0;padding:0; }
#login {
background:red;
width:200px;
xpadding:5px;
}
#login a, #login a:visited {
color:blue;
text-decoration:none;
font:12px verdana;
}
</style>
    <title>Untitled 1</title>
</head>

<body>



<div id="login"><div style="float:right;margin-right:5px;"><img src="https://si0.twimg.com/sticky/default_profile_images/default_profile_0_normal.png" /> </div>

<div style="float:right;color:red;text-align:right;"><a href="#">@Testing</a><br /><a href="?wipe=1">Logout</a></div>
<div style="clear:both;"></div></div>

</body>
</html>

Try that on say... http://htmledit.squarefree.com/ that and you'll see red is still visible on the right-hand side of the border when it should float all the way right.

Upvotes: 0

Views: 2381

Answers (5)

Anand Thangappan
Anand Thangappan

Reputation: 3106

Do like that:

<div id="login"><div style="float:right;padding-left:10px;"><img src="https://si0.twimg.com/sticky/default_profile_images/default_profile_0_normal.png" /> </div>

enter image description here

Upvotes: 1

jcomeau_ictx
jcomeau_ictx

Reputation: 38422

Setting the margin to 0 inside your image div gets the image all the way over.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style>body { margin:0;padding:0; }
#login {
background:red;
width:200px;
xpadding:5px;
}
#login a, #login a:visited {
color:blue;
text-decoration:none;
font:12px verdana;
}
</style>
    <title>Untitled 1</title>
</head>

<body>



<div id="login"><div style="float:right;margin-right:0px;"><img src="https://si0.twimg.com/sticky/default_profile_images/default_profile_0_normal.png" /> </div>

<div style="float:right;color:red;text-align:right;"><a href="#">@Testing</a><br /><a href="?wipe=1">Logout</a></div>
<div style="clear:both;"></div></div>

</body>
</html>

Upvotes: 1

Kyle Undefined
Kyle Undefined

Reputation: 776

Take off the margin-right:5px; on your inner DIV around the image.

<div style="float:right;">

Upvotes: 4

djlumley
djlumley

Reputation: 2967

<div style="float:right,margin-right:5px;">

margin-right:5px

Upvotes: 4

mgiuca
mgiuca

Reputation: 21357

Well the float has "margin-right:5px;" in its style attribute. That's causing a 5-pixel margin on the right... if you remove that, it will go all the way to the right.

You asked to make the image go all the way to the right on a div, but you didn't say which div. The img is already all the way to the right on its immediate parent, but that div is 5 pixels from the right of its parent ("login").

Upvotes: 3

Related Questions