I try to align a div at the bottom of a parent div. I tried the following:
JS Fiddle
I thought it would work with:
.bottom-menu {
position: absolute;
bottom: 0;
height: 50px;
background-color: yellow;
}
But as you can see in the fiddle it does not work. How can i do it?
You need to give a width to it as well. also you should use position: relative on the parent (the default is static). See updated fiddle: http://jsfiddle.net/wuf0m41z/1/
You could also specify right and left properties, and set them to 0, instead of setting width exclusively:
HTML:
<div class="container">
<div class="top-menu"></div>
<div class="bottom-menu"></div>
</div>
CSS:
.container {
height: 400px;
background-color: green;
position:relative;
}
.top-menu, .bottom-menu {
height: 50px;
background-color: yellow;
}
.bottom-menu {
position: absolute;
bottom: 0;
right:0;
left:0;
}
JSFiddle
just add the position:relative; to your container and don't forgetto add a width:100%; to your bottom menu.
here is an example:
http://jsfiddle.net/leojavier/wuf0m41z/10/
Try it !!!
.container {
height: 400px;
position: relative;
background-color: green;}
.top-menu {
height: 50px;
background-color: yellow;}
.bottom-menu {
height: 50px;
background-color: yellow;
position:absolute;
bottom:0;
width:100%;}
Your code is correct now just have to add width.
.bottom-menu {
position: absolute;
bottom: 0;
height: 50px;
background-color: yellow;
width:100%;
}
Related
How can I achieve the styling shown in the picture? Consindering the following scenario: I got 2 nested div elements, by which the parent is "relative positioned" and the child is "absolute positioned"! And the child div is always "fixed to the bottom" of the body element, when browser is scaled. I don't get this to work...
Here is the code, where I am using padding-bottom: 100%. But this is not a good solution! Is there a way to realise this with only CSS 2.1 API?
body {
min-height: 100%;
background-color: grey;
}
.parent {
height: 70px;
width: 440px;
left:200px;
background-color: blue;
position: relative;
}
.child {
display: block;
position: absolute;
width: 100px;
right:0px;
background-color: yellow;
padding-bottom: 100%;
}
<body>
<div class="parent">
<div class="child">Fix to bottom</div>
</div>
</body>
Don't take 2nd div as child. You want it to stick to bottom and parent div's height will disturb it while scalling.
I hope this helps :)
body {
min-height: 100%;
background-color: grey;
}
.parent {
height: 70px;
width: 400px;
left:100px;
background-color: blue;
position: relative;
top:70px;
}
.another-parent {
display: block;
height:60%;
position: absolute;
bottom:0;
width: 100px;
right:22%;
background-color: yellow;
}
<body>
<div class="parent"></div>
<div class="another-parent">Fix to bottom</div>
</body>
I have two divs that I am trying to stack over each other but the one I want on top is not showing. I want the blue background div to lay on top of the red background div. Any advice? The reason why I want to overlay the blue div is because the container is a centered grid and I want the red div to be the background for the first half of the page.
JSFIDDLE
CSS
.buddy {
width: 50%;
height: 629px;
display: inline-block;
position: relative;
background: red;
}
.buddy-content {
position: absolute;
top: -629px;
z-index: 10;
background: blue;
}
.container {
max-width: 1000px;
margin: 0 auto;
overflow:hidden;
position:relative;
padding: 0 10px;}
You have made the second div absolute so you don't need to give the negative value for top. The second div is hiding because you top -629px; Try making the top:0 and see. And also for your current code. Remove the overflow hidden and put z-index like this:
.buddy {
width: 50%;
height: 629px;
display: inline-block;
position: relative;
z-index:9;
background: red;
}
.buddy-content {
position: absolute;
top: -629px;
z-index: 10;
background: blue;
}
.container {
max-width: 1000px;
margin: 0 auto;
width:200px;
height:200px;
position:relative;
padding: 0 10px;
}
.buddy {
width: 50%;
height: 629px;
display: inline-block;
position: absolute;
background: red;
}
.buddy-content {
position: absolute;
z-index: 10;
background: blue;
}
<div class="buddy BlueGradient">
</div>
<div class="container">
<div class="buddy-content">
ROGER
</div>
</div>
https://jsfiddle.net/kt77cp3e/6/
just add z-index : higher to the div that you want to show on top and set z-index low to the other one ..
ant one thing your code is working good just you need to remove " top : -629px;"
that thing is not allowing blue div to be on top just it is showing at the -629 px position..!!!!
If you can update your code like this, it may solve the issue:
Demo:https://jsfiddle.net/kt77cp3e/7/
CSS:
html, body {
height:100%;
width:100%:
}
.container {
width:50%;
height:100%;
background:red;
position:relative;
}
.container>div {
position:relative;
left:0;
right:0;
}
.container>div:first-child {
top:0;
height:50%;
background:blue
}
.container>div:last-child {
bottom:0;
height:50%;
background:green
}
HTML:
<div class="container">
<div></div>
<div></div>
</div>
Update: Considering the latest updated code, I think you should remove overflow:hidden from the container styles. That should do the trick
You should set the dimension on the .container div.
CSS:
.container {
position:relative;
width:100px; //You may modify these values
height:100px
}
Demo: https://jsfiddle.net/kt77cp3e/1/
.buddy { width: 50%; height: 629px; display: inline-block; position: relative; background: red;}
.buddy-content { position: absolute; top: 0px; z-index: 10; background: blue; }
.container {max-width: 1000px; margin: 0 auto; overflow:hidden; position:relative; padding: 0 10px; position: relative;}
<div class="container">
<div class="buddy BlueGradient">
<div class="buddy-content">ROGER</div>
</div>
</div>
This brings the text "Roger" with blue background on top of the red background
HTML
<div id="galerie">
<div id="stanga">
</div>
</div>
CSS
#galerie {
margin-top: 5%;
width: 974px;
height: 500px;
margin-left:auto;
margin-right:auto;
background-color:yellow;
}
#stanga {
width: 50px;
height: 50px;
background-color: red;
margin-top:20px;
margin-left: 0px;
}
I want my red square to have margin-top:10px from the yellow container.
http://jsfiddle.net/97fzwuxh/16/
Margins will collapse by design, So your inner margin have effect on your outer div.
add overflow:auto to your #galerie style
or
add padding:1px to your #galerie style
Your problem is called adjoining
Two margins are adjoinin of a box and top margin of its first in-flow child, if both belong to vertically-adjacent box edges
The margins are not working because they are collapsing, use:
position: relative;
top: 20px;
Here the updated fiddle: "http://jsfiddle.net/97fzwuxh/18/"
You can use absolute for this.
#galerie {
position: relative;
margin-top: 5%;
width: 974px;
height: 500px;
margin-left:auto;
margin-right:auto;
background-color:yellow;
}
#stanga {
position: absolute;
width: 50px;
height: 50px;
background-color: red;
margin-top: 10px;
margin-left: 0px;
}
You need position: relative on the outer element(#galerie)
and position: absolute on the inner element(#stanga)
#galerie {
width: 974px;
height: 500px;
background-color:yellow;
position: relative;
}
#stanga {
width: 50px;
height: 50px;
background-color: red;
margin-top:200px;
position: absolute;
}
Here is the updated working fiddle:
http://jsfiddle.net/97fzwuxh/19/
Also, read this article I found it very useful: https://css-tricks.com/absolute-positioning-inside-relative-positioning/
TLDR: A page element with relative positioning gives you the control to absolutely position children elements inside of it.
http://jsfiddle.net/P8g3C/
I am trying to create the layout above. I am not getting the scroll bar to the right side of the content.
Also, suggest if there is any alternate way which better than my current approach
My html code is
<div class="header"></div>
<div class="content">
<div class="content-left">Menu</div>
<div class="content-right">Content which should be scrollable</div>
</div>
<div class="footer"></div>
My CSS is
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
.header {
position: fixed;
width: 100%;
height: 100px;
top: 0;
left: 0;
background-color: aqua;
}
.content {
position: fixed;
top: 100px;
bottom: 35px;
left: 0;
width: 100%;
}
.content-left {
position: absolute;
top: 0;
left: 0;
width: 200px;
height:100%;
background-color: aquamarine;
}
.content-right{
position:absolute;
top:0;
left:200px;
width:100%;
height:100%;
overflow:auto;
background-color:blanchedalmond;
}
.footer {
position: fixed;
width: 100%;
height: 35px;
bottom: 0;
left: 0;
background-color: yellow;
}
You can just remove width:100% of .content-right:
Update:
Because you use absolute positiong for the .content-right we can just set the left and right for it to make the width dynamic:
.content-right{
position:absolute;
top:0;
/* add this */
right:0;
left:200px;
height:100%;
overflow:auto;
background-color:blanchedalmond;
}
Demo.
It's because you are assigning a width of 100% to .content-right, yet already occupy 200px with the menu column, hence pushing the scrollbar off.
Try this:
.content-right {
width:calc(100% -200px);
}
Alternately, you can remove the width property altogether, as #King King suggested
Here's a Fiddle of your original demo code showing the fix in action.
Please correct a width of class .content-right{ width:61%;}. because you have give a width of 100% that why you are not able to see a overflow scroll.
I have a vertical parent container div with fixed positioning and height in pixels. I have child divs with same width as the parent. How do i stack these child divs inside the fixed parent? I am uanble to get through. please help.
If you want to do it statically, just set each child div's top property how you want it.
So if those child divs are 50px in height
#child1{
position:relative;
top:50px;
}
#child2{
position:relative;
top:100px;
}
and so on
They should already be stacked. Could you elaborate on your problem?
HTML
<div id="container">
<div class="stack one"></div>
<div class="stack two"></div>
<div class="stack three"></div>
</div>
CSS
#container {
width: 250px;
}
.stack {
width: 250px; height: 100px;
}
.one { background: red; }
.two { background: green; }
.three { background: orange; }
jsFiddle
Updated -
After reading your reply, I've now updated the CSS - jsFiddle
CSS
#container {
position: relative;
width: 250px; height: 300px;
}
.stack {
position: absolute;
width: 250px; height: 100px;
}
.one { background: red; bottom: 0; }
.two { background: green; bottom: 100px; }
.three { background: orange; bottom: 200px; }