Horizontally Align Fixed DIV
Question
<html>
<head>
<style>
#rectangle {
position: absolute;
right: 0;
bottom: 0;
width: 150px;
height: 200px;
}
</style>
</head>
<body>
<div id='rectangle' style='background-color:red;'></div>
<div id='rectangle' style='background-color:green;'></div>
<div id='rectangle' style='background-color:black;'></div>
</body>
</html>
This is the example code. I want all three boxes to appear side by side, using css. Any way of doing that? I want to use position:fixed, because I want them to appear on the bottom-right corner of the page without disturbing the rest of the page. These boxes will be chat boxes to tell you the truth.
6 answers
solution1
4 2013-07-31 22:13:27
I created this jsbin for you: http://jsbin.com/ikulem/13/edit note that you have to use class instead of id for the rectangles since you are having more than one element
The CSS:
#footer {
position:fixed;
right:0;
bottom:0;
}
.rectangle {
float: right;
width: 150px;
height: 200px
}
The HTML:
<html>
<head>
</head>
<body>
<div id="footer">
<div class='rectangle' style='background-color:red;'></div>
<div class='rectangle' style='background-color:green;'></div>
<div class='rectangle' style='background-color:black;'></div>
</div>
</body>
</html>
solution2
1 2013-07-31 22:12:56
<html>
<head>
<style>
.rectangles {
position:absolute;
right:0;
bottom:0;
}
.rectangle {
width: 150px;
height: 200px;
float:right;
}
</style>
</head>
<body>
<div class='rectangles'>
<div class='rectangle' style='background-color:red;'></div>
<div class='rectangle' style='background-color:green;'></div>
<div class='rectangle' style='background-color:black;'></div>
</div>
</body>
</html>
NB. Don't use IDs if you're using it multiple times on a page.
solution3
1 2013-07-31 22:15:14
This is a quick and dirty fix
Here is the body
<body>
<div class='rectangle' id="red"></div>
<div class='rectangle' id="green"></div>
<div class='rectangle' id="black"></div>
</body>
here is the css
#wrapper{
position:fixed;
right:0;
bottom:0;
}
.rectangle {
display: inline-block;
width: 150px;
height: 200px;
}
.red{
background:red;
}
.green{
background: green;
}
.black{
background:black;
}
relevant jsfiddle: http://jsfiddle.net/tlwr/xLTJE/1/
solution4
0 2013-07-31 22:22:38
Thanks guys. I used a Javascript function to do it for me.. thanks anyways.
function restructureChatBoxes() {
align=0;
$(".shout_box").each(function(index) {
console.log ( index );
if (align == 0) {
$(this).css('right', '0px');
} else {
width = (align)*(240+2);
$(this).css('right', width+'px');
}
align++;
});
}
solution5
0 2013-07-31 22:25:38
<html>
<head>
<style>
#shape{
bottom: 0;
right: 0;
position: absolute;
}
.rectangle{
float: left;
width: 150px;
height: 200px;
}
</style>
</head>
<body>
<div id="shape">
<div class='rectangle' style='background-color:red;'></div>
<div class='rectangle' style='background-color:green;'></div>
<div class='rectangle' style='background-color:black;'></div>
</div>
</body>
</html>
This works exactly how you want it. Checkout a live version here !
I would also recommend moving the CSS to a separate file, as well as omitting the inline CSS for the background colours and putting these within the CSS file as well. This would make the code cleaner. For example:
The CSS:
.red{background-color:red}
.green{background-color:green}
.black{background-color:black}
The HTML:
<div id="shape">
<div class='red rectangle'></div>
<div class='green rectangle'></div>
<div class='black rectangle'></div>
</div>
solution6
0 2013-07-31 22:27:40
First of all, you cannot use the same id three times.
You could use
<div id='rectangle-01' style='background-color:red;'></div>
<div id='rectangle-02' style='background-color:green;'></div>
<div id='rectangle-03' style='background-color:black;'></div>
instead.
The css you should use if you adapt the ids:
#rectangle-01 {
position:fixed;
right:0;
bottom:0;
width: 150px;
height: 200px;
}
#rectangle-02 {
position:fixed;
right:150px;
bottom:0;
width: 150px; //so the divs don't overlap
height: 200px;
}
#rectangle-03 {
position:fixed;
right:300px;
bottom:0;
width: 150px;
height: 200px;
}
Of course, the whole thing would be better with classes. You could make a div with position:fixed and right: 0 + bottom: 0 and then place the chatboxes inside it:
<div id='chatboxes'>
<div class='rectangle' style='background-color:red;'></div>
<div class='rectangle' style='background-color:green;'></div>
<div class='rectangle' style='background-color:black;'></div>
</div>
The css for this would be:
#chatboxes {
positon:fixed;
right:0;
bottom:0;
}
#chatboxes .rectangle{
float:left;
width: 150px;
height: 200px;
}
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.