This question already has answers here:
Keep div at the bottom of another div - css
(5 answers)
Closed 4 years ago.
I have a question for those frontend people out here:
How do I position a div at the bottom of its parent?
In my body-tag, which is for example 100px tall, I have a div, which is 10px tall.
How can I now make the div go to the bottom of the body tag, instead of going to the top?
I seriously can't figure that out!
Greetings
Alex
Its pretty easy, this is how you do it.
First you define position: relative to parent
Second you define position: absolute to child
Using top, left, right, bottom you can position child element where you want.
.parent {
width: 300px;
height: 300px;
position: relative;
border: 1px solid #ccc;
}
.child {
width: 100px;
height: 100px;
position: absolute;
bottom: 0;
left: 10%;
background-color: #000;
}
<div class="parent">
<div class="child">
Example text
</div>
</div>
Like that:
div{
background-color:red;
width:100px;
height:300px;
position:relative;
}
div > div{
background-color: blue;
width:100px;
height:100px;
position:absolute;
bottom:0px;
}
<div>
<div>
</div>
</div>
Related
This question already has answers here:
Fixed position but relative to container
(31 answers)
Closed 6 years ago.
How can I display a DIV which is bigger than its ancestor, when the ancestor DIV has style overflow: hidden; position: relative;?
Here is an example:
HTML:
<div class="container">
<div class="content">
__________________________SHOW_ME
</div>
</div>
CSS:
.container {
position: relative;
padding: 10px;
overflow: hidden;
width: 10em;
border: 1px solid;
height: 50px;
}
.content {
position: absolute;
overflow: visible;
border: 5px solid red;
}
Here is this example on JS Fiddle.
I tried styling the content DIV with various combinations of position: absolute, overflow: visible, right: -100px, but it didn't help.
How can I style the content div so that it is entirely visible?
I cannot modify the parent DIV with container class, only the content inside.
if you want the content's position to be tied to the container, you basically can't unless you use javascript to update the position on scroll and set the position of the content to be fixed instead of absolute.
Actually you can't show div inside element using overflow:hidden, But I have solution for you.
You can give your div with overflow:auto, so user can scroll x
Here the example fiddle
.container {
position: relative;
padding: 10px;
overflow: hidden;
width: auto;
border: 1px solid;
height: 50px;
}
.content {
position: absolute;
overflow: auto;
border: 5px solid red;
width: auto;
padding: 10px;
}
<div class="container">
<div class="content">
__________________________SHOW_ME
</div>
</div>
This question already has answers here:
Border length smaller than div width?
(13 answers)
Closed 6 years ago.
I need help on border-bottom length. I want to set border-bottom length to 60%. I can do it using the inner div like:
#myDiv {
background: #FED;
_border-bottom: 5px solid red;
}
#myDiv div {
margin: 5px 0px;
width: 60%;
height: 5px;
background-color: red;
}
<div id="myDiv">
My div
<div></div>
</div>
But i don't want to use it with extra div, I want to achieve it using border-bottom, I search for this in google and stack but no luck.
Thanks in advance.
You can use pseudo element like this:
#myDiv {
background: #FED;
position: relative;
}
#myDiv::after {
content: "";
width: 60%;
height: 5px;
background: red;
position: absolute;
bottom: -5px;
left: 0;
}
<div id="myDiv">
My div
</div>
Hi
I want to place the div2 top align with the div1's border
So far I have tried this for div 2 but it did not work out well
element.style {
float: right;
position: relative;
vertical-align: top;
}
this did not align the div at top position , what could be the fix to make it top aligned?
I would achieve this using position: absolute; on the child like said before, but instead of adding an additional div to the DOM to simulate use the space , I would use a pseudo-element (more precisely, the ::before pseudo-element).
This is the structure I used for it:
<div class="parent">
<div class="child">
</div>
<h1>Start</h1>
</div>
The div with class parent needs to be position: relative;, and the child needs to be absolute to it and set to be top: 0; like the following lines explain:
.child {
position: absolute;
top: 0;
width: 100%;
height: 100px;
background-color: #000;
}
You will though need to set this element a fixed height and width, otherwise it will not work.
The problem of this approach is that you will have a div that will be over the first 100px of your .parent div.
To solve this we need to create a pseudo-element on the .parent div that will simulate that space and make everything work better:
.parent:before {
display: block;
content: ' ';
width: 100%;
height: 100px;
}
Here's a working fiddle with a sample code, hope this helps you!
http://jsfiddle.net/m54rxwjv/2/
PS: This will only work if you know that the height will always be 100px.
Give position relative to your parent div and position absolute to inner div. Don't forget to set top:0px for inner div and after this your inner div will be always at the top of your parent div.
#div1{position:relative;}
#div2{position:absolute;top:0px;}
As per Vipul's answer, I have create code snipped on jsfiddle for same behaviour:
http://jsfiddle.net/zo6jdp4b/1/
I have put one extra div on the top also so that one do not have any issue in child Div css:
.childDiv{
border: 1px solid blue;
height: 10px;
width: 30px;
position:absolute;
top: 0px;
}
Set your top div inside another div with sticky.
Like:
.div2 {
position: -webkit-sticky;
position: sticky;
top: 0px;
}
It should be placed as your div2 in your div1 element in which you have (for example) overflow-y: scroll on a set height (and bellow content to be vertically scrolled).
.div1{
box-sizing: border-box;
border: 3px solid red;
height: 150px;
width: 30px;
}
.div2{
box-sizing: border-box;
border: 3px solid green;
margin: -3px;
height: 30px;
width: 30px;
}
<div class="div1">
<div class="div2"></div>
</div>
.div1{
box-sizing:border-box;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
position:relative;
}
.div2{
box-sizing:border-box;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
position:relative;
top:0;
left:0;
}
div2 always at the top
I need to define a div that is preceded by any number of elements with arbitrary height, but it should fill the remaining space until the bottom of the fold.
The way I thought about doing this is to position the top with relative and the bottom with absolute, but I'm not sure if that's even possible in CSS.
#header {
border: 1px solid green;
width: 100%;
height: 100px;
}
#fill-the-fold {
border: 1px solid red;
position: absolute;
height: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
<div id="header"></div>
<div id="fill-the-fold"></div>
Basically, I want the red container to start below the green and fill the space to the bottom of the page.
Any help on how to accomplish that, or if there's any easier way to go about it, much appreciated.
This is answered here.
In short - use flexbox if you can. Key items:
you'll need a flexbox wrapper around your 2 divs, with flex-direction: column
add flex-grow: 1 to #fill-the-fold.
Another possibility I couldn't see mentioned in the link above is to oversize the second div and chop off the bottom with a wrapper - fiddle. This is obviously only good when you don't mind losing the bottom of your second div.
You can reach your purpose by applying margin trick.
JSFiddle
HTML:
<div id="header"></div>
<div id="fill-the-fold">
<div id="content">
</div>
</div>
CSS:
html,body{ margin:0px; height:100%;}
div{
box-sizing: border-box;
}
#header {
border: 1px solid green;
width: 100%;
height: 100px;
}
#fill-the-fold {
margin-top: -100px; /* shifting it covers head */
padding-top: 100px; /* shifting the content under the head */
height: 100%;
}
#content{
border: 1px solid red;
height: 100%;
}
Append your red-border part after the head, and shifting it by negative margin. Then write your real content in the inner one.
I think this is a classic one. I found a lot of similar questions but no answer.
I want to vertical center any image of any not-known height into a div with overflow:hidden
This is what I have right now:
.outer {
padding-top:49px;
height:49px;
width:280px;
overflow:hidden;
background-color:yellow;
}
.outer .inner {
float:left;
position:relative;
display:block;
background-color:blue;
}
.outer .inner img {
position:relative;
top:-50%;
width:280px;
height:auto;
border:0px;
display:block;
}
So the .inner is pushed to the center of the .outer by padding-top, so I get a "window" of 2 x 49px = 98px height. Then the img I thought would be pushed out 50% from the .inner height but for some reason i get a different number…
Does anybody know what I am doing wrong?
Thank you in advance!
I faced a similar situation and solved it with a different approach.
For that I used the image as a background image of a div.
Code sample
<head>
<style>
div.imgbox1{
width: 160px;
height: 110px;
overflow: hidden;
background-position: 50% 50%; /* for vertical and horizontal center alignment*/
}
</style>
</head>
<body>
<div class='imgbox1' style="background-image: url(http://photos-h.ak.fbcdn.net/hphotos-ak-snc6/399232_10151118743727680_899168759_a.jpg)" >
</div>
</body>
If using img tag isn't a must you can try this
First things first... An explanation of why you are getting the result you are getting. This is quite simple. Setting position: relative; (or absolute for that matter), and then setting top: 50%; aligns the very top of your image to 50%. If you make the height of your image 1px, you can see that the 1px is centered. Unfortunately there is no way with CSS to tell it to align to the center of the image rather than the top edge.
Now... A possible solution...
Assuming that nothing else is going inside this .inner div, have you considered allowing the image to determine the inner div's height via a margin?
Take for example this JSFiddle.
You can "center" the image inside the .inner div, by setting margin left and right to auto, and margin top and bottom to some px value... In my example 60px.
If you want to obtain a total div height of 600px, and your image is always 400px tall, then a margin top and bottom of 100px makes a total height of 600px. (400+100+100=600).
HTML:
<div class="outer">
<div class="inner">
<img src="http://farm9.staticflickr.com/8311/8023199579_f52f648727_m.jpg">
</div>
</div>
CSS:
.outer {
height:520px;
width:520px;
overflow:hidden;
background-color:yellow;
border: 2px solid purple;
}
.outer .inner {
width: 340px;
display:block;
background-color:blue;
border: 1px solid red;
padding: 10px;
margin: 0 auto;
}
.outer .inner img {
width:280px;
height:auto;
margin: 60px auto;
border:0px;
display:block;
border: 1px solid orange;
}
A second possible solution...
Assuming that the <img> tag does not HAVE to remain an <img> tag, then a very simple way to do this is to move the image itself to CSS, as a background-image.
See this JSFiddle for a demonstration of this solution.
HTML:
<div class="inner">
</div>
CSS:
.inner {
width: 540px;
height: 340px;
display:block;
background-color:blue;
border: 1px solid red;
margin: 0 auto;
background: blue url('http://farm9.staticflickr.com/8311/8023199579_f52f648727_m.jpg') no-repeat 50% 50%;
}