Quick and easy question. I'd like to have a floating box that stays in the bottom right of a div (in HTML). How would I do this with css?
Thanks! (attached is what I want it to look like)
Hope this will be what you are looking for.
.navBar {
height: 100px;
background-color: blue;
}
.div1 {
position: relative;
height: 200px;
}
.div1 .box {
position: absolute;
bottom: 40px;;
right: 40px;;
width: 200px;
height: 40px;
background-color: red;
}
.div2 {
height: 100px;
background: green;
}
<div class="main-container">
<div class="navBar"></div>
<div class="div1"><div class="box"></div></div>
<div class="div2"></div>
</div>
what you're looking for is:
position:absolute;
bottom:0;
right:0; which will position things relative to the positioned parent.Note that the parent element (div) needs to have its position set as well. Most people do position:relative;
The values bottom:0 and right:0 means to move it 0px away from the bottom of the parent and 0 px away from the right side of the parent.
See the following w3schools for further information:
https://www.w3schools.com/css/css_positioning.asp
https://www.w3schools.com/css/tryit.asp?filename=trycss_position_absolute
Related
I'm currently working on a solution, where I have to display an error message above (z-index) a section.
The section has it css overflow attribute set to scroll or hidden. This is causing the error message to be truncate on the left side.
I would very like to keep the DOM as it is. Is there a way to display the div for the error message "above" the blue div.
Js fiddle
HTML :
<div>
<div id="div1">
div 1
</div>
<div id="div2">
div 2
<div id="msgErreur">
Error
</div>
</div>
</div>
**CSS : **
#div1 {
width : 48%;
border: 1px solid red;
height: 150px;
float:left;
}
#div2 {
width : 48%;
border: 1px solid blue;
height: 150px;
float:right;
overflow-y:scroll;
}
#msgErreur {
background:#942911;
color:white;
top:30px;
left: -10px;
width : 150px;
height : 30px;
position:relative;
z-index:5;
}
edit: 2 ways of achieving this. Relatively positioned (extra) element in an absolutely positioned one or (new) an absolutely positioned element and transform.
You can achieve this by using position: absolute on the container of the error message and an extra div relatively positioned between container and message.
The DOM is slightly modified but without moving whole blocks of code, maybe it's OK with your requirements?
Relevant HTML:
<div id="msgErreur">
<div>Error</div>
</div>
Relevant CSS:
#msgErreur {
position: absolute;
z-index: 5;
color: white;
}
#msgErreur > div {
position: relative;
top: 30px; left: -10px;
width: 150px; height: 30px;
background: #942911;
}
Fiddle
EDIT: it's 2016 and transform: translate(X, Y) is compatible with a large set of browsers (IE9+ according to caniuse.com).
Here's another way of achieving what OP needed, with no extra element needed:
#div1 {
width : 48%;
border: 1px solid red;
height: 150px;
float:left;
}
#div2 {
width : 48%;
border: 1px solid blue;
height: 150px;
float:right;
overflow-y:scroll;
}
#msgErreur {
background:#942911;
color:white;
/* top:30px; */
/* left: -10px; */
width : 150px;
height : 30px;
position: absolute; /* not relative anymore */
/* z-index:5; It's already stacked above if positioned. Needed if other positioned elements are there (a value of 1 would be enough) */
transform: translate(-10px, 30px); /* replaces relative positioning (left and top => X and Y) */
}
<div>
<div id="div1">
div 1
</div>
<div id="div2">
div 2
<div id="msgErreur">
Error
</div>
</div>
</div>
Codepen
I am trying to overlap the div2 over div1
http://jsfiddle.net/user1212/QsLVB/
<div id="div1"></div>
<div id="div2"></div>
#div1{
width: 200px;
height: 200px;
background-color: olive;
float: right;
position: relative;
z-index: 1;
}
#div2{
width:100px;
height: 100px;
background-color: orange;
float: right;
position: relative;
z-index: 2;
}
I need both to float to the right.
There's a number of ways you could get them to overlap.
First example http://jsfiddle.net/QsLVB/3/
Use negative margins.
#div2{
margin: 20px -100px 0 0;
}
Second example http://jsfiddle.net/QsLVB/4/
Just make the div a child of the other one. In this case z-index will not do anything, since the child will always be shown above the parent.
<div id="div1">
<div id="div2"></div>
</div>
Also, you can go other routes and use position: absolute instead and like top/right values, etc.
#div1{
width: 200px;
height: 200px;
background-color: olive;
position: absolute;
z-index: 1;
right: 0;
}
#div2{
width:100px;
height: 100px;
background-color: orange;
position: absolute;
z-index: 2;
right: 0;
}
Actually you don't need negative margins or anything like that - you can just modify your existing css to solve the problem. I ran it using my code and it works great. This is the solution I would choose in your case.
Firstly to layer anything you need to use position: absolute or position: fixed (which work similarly for our needs here).
Secondly, once using position absolute (or fixed) you can choose to position one or more edges of each div using top: right: bottom: and left:. You don't need any of them, but providing at least one will guarantee that that edge will appear at that pixel position within it's containing div.
Assuming you place these two divs within the body tag or at least don't need them to be further right than their outer containing div, you can set "right: 0;" for each div and they will work similarly to float: right for relative positioned divs (As in your original code), but since they are absolute positioned they can occupy the same space.
Then use z-index to control which one appears on top of the other.
cheers :-D
You could also set the left or right property of div2
DEMO using left
#div2 {
...
left: 200px;
}
Or instead of using float:right, use position:absolute in conjunction with right
DEMO
#div1, #div2 {
/* float: right; // removed */
position: absolute; /* changed from relative */
right: 0; /* added */
}
This is easy to accomplish if you put div2 inside div1, giving div2 an absolute position and right: 0 while its parent, div1, has a relative position.
See it in action here: http://jsfiddle.net/heGJt/
Here's the simplified CSS:
#div1 {
position: relative;
width: 200px;
height: 200px;
background-color: olive;
float: right;
}
#div2 {
width:100px;
height: 100px;
background-color: orange;
position: absolute;
right: 0;
}
And the HTML:
<div id="div1">
<div id="div2"></div>
</div>
Here's the fiddle: http://jsfiddle.net/gBQqQ/
Here's the html:
<div id='testtexture'>
<div id='testinside'>
<div style='vertical-align: top;' class='test'></div>
</div>
</div>
And the css:
.test {
width: 50px;
position: relative;
margin-left: auto;
margin-right: auto;
min-height: 130px;
height:auto;
padding-bottom:50px;
background:blue;
}
#testtexture {
width: 100%;
position: relative;
top: 10px;
}
#testinside {
z-index: 3;
background:red;
position:relative;
}
I do not see why there is an issue. I expect either there is something obvious that I am missing, or there is an underlying issue which means I cannot make the red div go above the blue div- maybe because it is a child of the blue div?
Generally not the best idea to have a child div you want to appear behind it's parent. Usually you would take the child div outside the parent to do this. Nonetheless it is possible. Add z-index:-1 to the child div and remove position:relative from the parent.
HTML
<div id='testtexture'>
<div id='testinside'>
<div class="test"></div>
</div>
</div>
CSS
.test {
position: relative;
z-index: -1;
width: 50px;
margin: 0 auto;
height: auto;
min-height: 130px;
padding-bottom: 50px;
background: blue; }
#testinside { background: red; }
See fiddle: http://jsfiddle.net/gBQqQ/1/
If you use firebug, you can see div.test is still there in the correct position behind it's parent. As a side note, the styling vertical-align you had on a div won't do anything.
I want to make 2 divs beside each other to be aligned on the same horizontal line WITHOUT FLOATs
I've tried Position:relative ,, but no luck
See the example below :
http://jsfiddle.net/XVzLK
<div style="width:200px;height:100px;background:#ccc;">
<div style="background:Blue; float:left; width:100px; height:100px;"></div>
<div style="background:red; float:left; margin-left:100px; width:100px; height:100px;"></div>
</div>
From the link above, I need the red box to be on the same line of blue box with no space below ..
EDIT : I want the red box to stay outside the container gray box (just as it is) thanks
Relative with inline-block display
#one {
width: 200px;
background: #ccc;
}
#two {
display: inline-block;
background: blue;
position: relative;
left: 0;
width: 100px; height: 100px;
}
#three {
display: inline-block;
background: red;
position: relative;
left: 0;
width: 100px; height: 100px;
}
<div id="one"><div id="two"></div><div id="three"></div></div>
EDIT
The code below also works fine. Here, because of comments, the line feed is commented out and ignored.
#one {
width: 200px;
background: #ccc;
}
#two {
display: inline-block;
background: blue;
position: relative;
left: 0;
width: 100px; height: 100px;
}
#three {
display: inline-block;
background: red;
position: relative;
left: 0;
width: 100px; height: 100px;
}
<div id="one">
<div id="two"></div><!--
--><div id="three"></div>
</div>
Why it works block displays take the whole width of their container, even if you set a very small width, rest of the space
will be taken as margin (even if you remove margin). That's just how
they behave. inline-block displays work much like inline displays
except that they do respect the padding etc you give them. But they
still ignore margins (someone correct me if I am wrong). Same as
inline displays, if you give a line-feed between them in your HTML,
it's converted to a small space. So to remove that, Here I have the
HTML in a single line. If you indent the code then the div#three
will be pushed down (as you have fixed width of div#one so height is
only option.)
Use Position properties when your height and width are fixed
<div style="width:200px;height:100px;position:relative;background:#ccc;">
<div style="background:Blue; position:absolute; left:0%; width:50%; height:100%;">
</div>
<div style="background:red; position:absolute; left:50%; width:50%; height:100%;">
</div>
</div>
If you want to avoid float, position and inline-block, here's a margin-only solution:
<div style="width:200px; background:#ccc;">
<div style="background:blue; width:100px; height:100px;"></div>
<div style="background:red; width:100px; height:100px; margin:-100px 0 0 100px;"></div>
</div>
Updated fiddle
If you want your divs on same line without floats you can use display: inline-block; and give some negative margin value to your div because inline-block contains some margin between them.
See this fiddle
As your Edited question I have submitted another fiddle here
Or you could simply add margin-top: -100px; to your fiddle.
http://jsfiddle.net/XVzLK/22/
<div style="width:200px;position: relative; background:#ccc;">
<div style="background:Blue; position:absolute; top:0; left: 0; width:100px;height:100px;"></div>
<div style="background:red; position:absolute; top:0; right: 0; width:100px;height:100px;"></div>
</div>
Setting position relative on the coloured divs makes their position relative to where they would have been in the document. I think what you wanted to do is make the containing div position relative, and the children divs positioned absolutely within it. I'm assuming that "with now space below" meant "with no space below"
There is a tutorial here that may be of use: http://www.barelyfitz.com/screencast/html-training/css/positioning/
I want the "blue" container to always be 70px high, while the previous "green" div always max out the height available when the div is resized with javascript.
I've played around with it for a while without finding a proper solution. Help will be appreciated.
As promised, here's my answer.
absolute inside relative positioning is the easiest way to do this.
Live Demo
HTML:
<div id="parent">
<div id="left">height: 100%</div>
<div id="right">Content</div>
<div id="rightFooter">height: 70px</div>
</div>
CSS:
#parent {
position: relative;
height: 200px
}
#left, #right, #rightFooter {
position: absolute
}
#left {
width: 200px;
top: 0;
bottom: 0;
left: 0
}
#right {
top: 0;
right: 0;
bottom: 70px;
left: 200px;
overflow-y: auto
}
#rightFooter {
height: 70px;
right: 0;
bottom: 0;
left: 200px
}
Would something like this work?
Live Demo
Added an animation of the height so you can see the content extending.
Markup
<div id="parent">
<div class="left">
Lefty
</div>
<div class="right">
<div id="rightContent">
right Content
</div>
<div id="rightFooter">
Right Footer
</div>
</div>
<div class="clear"></div>
</div>
CSS
#parent{
height:300px;
}
.left{
float: left;
width: 33%;
background: red;
height:100%;
}
.right{
float : left;
width: 66%;
height:100%;
}
#rightContent{
height: 100%;
background: blue;
}
#rightFooter{
background: yellow;
height: 70px;
float: right;
width: 100%;
margin-top: -70px;
}
.clear{
clear:both;
}
Bah, before the comments come this is a partial solution, the text for the content area will bleed into the footer... looking at a solution for this, or someone else might be able to modify my markup/css to account for that.
Made an example for you here :)
you need to have a left floated div for the left content and a wrapper for the two other right divs, also floated left.
Take a look :)