How to position a div element on the right side of the screen
Question
I am trying to get this div to be all the way to the right side of the screen. here is the html:
<html>
<head>
title></title>
<link rel="stylesheet" type="text/css" href="../css/style.css"/>
</head>
<h1> </h1>
<body>
<div id="bannerR">
<a href="yahoo.com" target=_blank>
<img src="yahoo.com" border=0></a>
</div>
and here is the style.css
#header{background-color: #fff; width: 1000px; position: relative; }
#bannerL{ position: relative; top: 500px; left: 500px; }
#bannerR{ position: relative; float: right; }
body {
background-image: url("beach.gif");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
margin-top:100px;
margin-right:180px;
margin-bottom:10px;
margin-left:200px;
}
please help, Im very new at code and bought a book but that hasnt helped. I have spent few hours trying to get this and to no avail.
3 answers
solution1
0 2013-12-13 20:57:02
确保您的DIV不包含在空间有限的元素内（不跨越页面的整个宽度）
solution2
0 2013-12-13 20:59:19
Make sure you link the css file to the HTML so the browser knows what css files you are using.
<html>
<head>
<link rel="stylesheet" type="text/css" href="your_style.css">
</head>
<body>
<!-- YOUR HTML -->
</body>
</html>
solution3
0 ACCPTED 2013-12-13 21:23:39
Your body styles contain margin-right:180px . Because of that the #bannerR will never float all the way to the right. Remove that style and it'll work. Here is some code:
body { background-image: url("beach.gif"); background-repeat: no-repeat; background-attachment: fixed; background-position: center; }
Here's a fiddle to show it in proof: http://jsfiddle.net/rzKaz/1/
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.