Div wont float on the right side of the browser
Question
I've got two sets of buttons inside a div, one div needs to float on the left side of the broswer, the other to the right. They should be fixed so they will never move. The only problem I am having is getting the right one to go to the right side of the browser. It seems to be confused and wants to stay on the left side.
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML>
<HEAD>
<TITLE>My Company</TITLE>
<SCRIPT SRC="jscript/jquery/jquery-1.10.2.min.js"></SCRIPT>
<? include("include/restocss.php"); ?>
</HEAD>
<BODY>
<DIV ID="leftbuttons">
<DIV CLASS="activitybutton">This is left</DIV><BR>
<DIV CLASS="activitybutton"></DIV><BR>
<DIV CLASS="activitybutton"></DIV><BR>
<DIV CLASS="activitybutton"></DIV>
</DIV>
<CENTER>
<DIV ID="wrapper">
<DIV ID="header">
<img src='css/images/logo.png' />
</DIV><br>
<DIV ID="navbar">NAVIGATION</DIV>
<script type="text/javascript">
$(function() {
moveScroller();
});
</script>
<DIV ID="content">
</DIV>
<DIV ID="footer">
</DIV>
</DIV>
</CENTER><
<DIV ID="rightbuttons">
<DIV CLASS="activitybutton">This is right</DIV><BR>
<DIV CLASS="activitybutton"></DIV><BR>
<DIV CLASS="activitybutton"></DIV><BR>
<DIV CLASS="activitybutton"></DIV>
</DIV>
</BODY>
</HTML>
CSS :
{ margin: 0; padding: 0; border: 0; }
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
background-color: #B99666;
background-image: url('images/bg.jpg');
background-size: 100%;
background-repeat: no-repeat;
background-attachment: fixed;
}
#wrapper {
margin: 0 auto;
width: 800px;
}
#header {
float:left;
color: #333;
width: 705px;
padding: 10px;
border: 0px solid #ccc;
height: auto;
margin: 5px 0px 5px 0px;
background: #F2F2E6;
/*margin-left: 95px;*/
}
.activitybutton{
color: #333;
width: 195px;
float: left;
padding: 10px;
border: 1px solid #ccc;
height: 60px;
margin: 0px 0px 5px -11px;
background: #F2F2E6;
z-index: 2;
}
#navbar {
width: 720px;
border: 1px solid #ccc;
background: #3A451C;
margin: 5px 5px 5px 0px;
margin-top: 0px;
padding: 0px;
/*margin-left: 95px;*/
height: auto;
float: left;
}
#leftbuttons {
color: #333;
border: 0px solid #ccc;
/*background: #E7DBD5;*/
margin: 180px 0px 0px 0px;
padding: 10px;
height: auto;
width: 125px;
position: fixed;
float: left;
z-index: 2;
}
#content {
float: left;
color: #333;
border: 1px solid #ccc;
background: #F2F2E6;
margin: 0px 5px 5px 0px;
margin-top: 0px;
padding: 10px;
height: 800px;
width: 705px;
display: inline;
}
#rightbuttons {
color: #333;
border: 0px solid #ccc;
/*background: #E7DBD5;*/
margin: 180px 0px 0px 0px;
padding: 10px;
height: auto;
width: 125px;
position: fixed;
float: right;
z-index: 2;
}
#footer {
float: left;
color: #333;
border: 1px solid #ccc;
background: #F2F2E6;
margin: 0px 5px 5px 0px;
/*margin-left: 95px;*/
margin-top: 0px;
padding: 10px;
height: 800;
width: 705px;
display: inline;
position: relative;
}
.logfooter { position:relative; bottom: 0px; left: 0px; z-index: 5; display:inline-block; }
.footerbranch { position:relative; bottom: 232px; left: 702px; z-index: 1; display:inline-block; }
.navlogbottom { position:relative; bottom: 232px; left: 702px; z-index: 4; display:inline-block; }
The div in question is the "rightbuttons" div
3 answers
solution1
0 2013-10-18 18:32:27
It's not confused, it's doing what you are telling it to do. In your selector for #rightbuttons you have float: left;
Change it to float: right;
#rightbuttons {
color: #333;
border: 0px solid #ccc;
/*background: #E7DBD5;*/
margin: 0px 5px 5px 0px;
margin-left: 1154px;
margin-top: 180px;
position: fixed;
padding: 10px;
height: auto;
width: 195px;
float: left;
z-index: 2;
}
Needs to be....
#rightbuttons {
color: #333;
border: 0px solid #ccc;
/*background: #E7DBD5;*/
margin: 0px 5px 5px 0px;
margin-left: 1154px;
margin-top: 180px;
position: fixed;
padding: 10px;
height: auto;
width: 195px;
float: right;
z-index: 2;
}
solution2
0 ACCPTED 2013-10-18 18:33:37
Just use right: 0; since you are using position: fixed;
#rightbuttons {
color: #333;
border: 0px solid #ccc;
/*background: #E7DBD5;*/
margin: 0px 5px 5px 0px;
margin-left: 1154px;
margin-top: 180px;
position: fixed;
padding: 10px;
height: auto;
width: 195px;
z-index: 2;
right: 0;
}
solution3
0 2013-10-18 18:35:23
Instead of floating these, I would recommend you use the top, left, right properties and removing the margins to position them exactly where you need them (floating right will position the right buttons lower than the left buttons vertically).
#rightbuttons {
right:8px;
top:180px;
margin:0;
}
#leftbuttons {
left:8px;
top:180px;
margin:0;
}
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.