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
Related
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 used the JsFiddle at jsfiddle.net/5tzk3/10. I changed it to display the div as square shaped dialog (both horizontally and vertically centered). The result is at jsfiddle.net/5tzk3/548.
As you see, centering horizontally was easy, but I could not get it centered vertically. Anyone who knows how to do that with pure CSS?
Edited code below:
<div class="blind">
<div class="wrapper">
<div class="main">
I'm your div with an aspect-ratio of 1:1!
</div>
</div>
</div>
html, body, .blind {
height: 100%;
width: 100%;
}
.blind {
left: 0;
position: fixed;
text-align: center;
top: 0;
}
.wrapper {
display: inline-block;
margin: auto;
position: relative;
width: 50%;
}
.wrapper:after {
content: '';
display: block;
padding-top: 100%;
}
.main {
background-color: rgb(0, 162, 232);
bottom: 0;
left: 0;
margin: auto;
position: absolute;
right: 0;
top: 0;
}
Use display: table for the parent div, and display:table-cell; vertical-align: middle for the content div which you want to vertically center.
The most common way of doing this if you've got an element with known dimensions is to use positioning to firstly position it top: 50% (which places the top edge of the element 50% of the way down) and then use a negative top-margin of half the height of the element (pulling it back up by half it's height).
To give you an example, to absolutely position a 200x200 element dead-centre on the page you would use:
.element{
display: block;
width: 200px;
height: 200px;
position: absolute;
top: 50%;
margin-top: -100px
}
Alternatively, you can use a combination of display: table and then display: table-cell on the parents to open up the ability to use vertical-align although this is a bit nasty when it comes to laying out elements around it.
you can drop absolute positionning and use either display:table or inline-block with pseudo elements.
here is a mixed of the 2 methods
1) html/body as a table one cell
2) inner content with ratio preserved and content as inline box set in the middle.
.ratio1-1 {
width:25%;
vertical-align:middle;
margin:auto;
background:turquoise;
}
.ratio1-1:before {
content:'';
padding:50% 0;
width:0;
display:inline-block;
vertical-align:middle;
}
.ib {
display:inline-block;
vertical-align:middle;
}
/* center body content as a table cell */
html {
height:100%;
width:100%;
display:table;
}
body {
display:table-cell;
vertical-align:middle;
text-align:center;
}
<div class="ratio1-1">
<div class="ib">content in middle</div>
</div>
demo: http://codepen.io/gc-nomade/pen/pubFm
Basically I have a nested <div> as a footer and the parent div is centered 1000px wide.
I was wondering if it was possible to extend the width of footer div so that it goes out of the parent to fit the browsers width but still keeps its place in the parent?
My solution assumes that .parent element has stretched height. even if it is not the case, then it seems you want the .footer element stick to the bottom of the page. If it is so, then using position:absolute you can bring the child block out of the parent block and then pin it to bottom using bottom: 0px and then to stretch its width use left:0px and right: 0px.
Working Fiddle
UPDATED:
Use this Doctype declaration:
<!DOCTYPE html>
Also, in .footer element mention top:auto css property. Something like this:
.footer{
padding: 0px 15px;
height: 50px;
background-color: #1A1A1A;
position:absolute;
bottom: 0px;
left: 0px;
right: 0px;
top: auto; /* added (IE FIX) */
}
Something that would work for you:
.parent{
width: 300px; /* your parent width */
}
.footer{
height: 50px; /* your footer height */
position:absolute;
left: 0px;
right: 0px;
}
Demo
You could set the footer position to relative and set the left property to -100px and width to 1200px for example.
Better still don't have it in the parent div, have it as it's own div with it's own values set.
Do like this
html
<div id="parent" class="wrap"></div>
<div id="footer"></div>
css
.wrap{width: 1000px;}
#footer{width: 100%;}
Try this CSS.
#footer {
position:absolute;
bottom:0;
width:100%;
}
Try this css this will definitely work as you want
html,body{
height: 100%;
padding: 0px;
margin: 0px;
}
.parent{
width: 400px;/*put your width here*/
height: 100%;
background-color: #ccc;
margin: 0 auto;
}
.footer{
padding: 15px 0px;
height: 30px;
background-color: #000;
position:absolute;
bottom: 0px;
left: 0px;
width:100%
}
If you really want to bypass the parent element, you could look into display:contents
https://css-tricks.com/get-ready-for-display-contents/
It really is a game changer if you need a div to wrap elements for some logic reason, but want the styling of all seperate elements.
Example without:
.main {
align-items: center;
box-sizing: border-box;
display: flex;
flex-direction: row;
}
<div class="main">
<div class="title">
<h2>Foo</h2>
<span>Bar</span>
</div>
<button>shamefull_button</button>
</div>
Example with:
.main {
align-items: center;
box-sizing: border-box;
display: flex;
flex-direction: row;
}
.title {
display: contents;
}
<div class="main">
<div class="title">
<h2>Foo</h2>
<span>Bar</span>
</div>
<button>shameless_button</button>
</div>
Here's my markup:
<div id="container">
<img id="image" src="image.jpg" />
<div id="contents">Contents</div>
</div>
The height of #container equals the height of #image.
All the heights are dynamic (they change on window resize).
The image can not be set via background property.
How can I have Contents over the image and vertically centered in #container?
Is the height of #contents known? In that case this should do it (jsfiddle demo):
#container{
position:relative;
/* For demo only */
height:500px;
border: 5px solid red;
}
#image{
position:absolute;
/* For demo only */
height:500px;
}
#contents{
position: absolute;
top:50%;
height:100px;
margin-top: -50px; /* Half of #contents height */
/* For demo only */
background-color: blue;
}
This ought to do what you are looking for. I have just set the height of the container and image in css, but if they are the same set in html or using javascript, the result should be the same. The background colour is just there for clarity.
#container {
background-color: #333;
height: 200px;
}
#image{
height: 200px;
float: left;
}
#contents{
line-height: 200px;
float: left;
position: fixed;
}
EDIT: Here is a fiddle of a solution using the old classic margin auto trick. The only thing that may cause problems here is that the parent needs to be position: fixed; which may cause issues for you elsewhere. The main thing is it works, and no heights are set using pixels.
link
Here is the code from the fiddle for a pure css solution with no fixed heights.
<div id="container">
<img id="image" src="https://www.google.co.uk/logos/2012/juan_gris-2012-hp.jpg" />
<div id="contents">Contents</div>
</div>
#container {
position: fixed;
}
#contents{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 50%;
height: 10%;
margin: auto;
}
If you know the height of #contents you can set up
#container{position:relative;}
#contents{
position:absolute;
top:50%; /*50% of parent*/
margin-top:/*negative one-half of container height i.e. if contaner is 4 em -2em*
}
You say you don't know the height of #contents, though.
Another option is to set the display: to table-cell and use vertical-align: middle
#container{
display: table-cell;
vertical-align: middle;
}
But depending on what browsers you are targetting for support, that may cause display issues as well.
The more sure fire way is to combine the first option with some jquery or javascript to find the element's height and set its margin-top:
content= document.getElementById('content')
content.style.marginTop = '-' + content.offsetHeight + 'px';
http://jsfiddle.net/h76sy/
EDIT: Sorry, had a bug in my javascript, try it now
I am trying to align vertically a modal box. But the margin-top:50% did not work as i expect. Basically i want a square centered on another square.
<style type="text/css">
#modal {
width: 300px;
height: 300px;
z-index: 100;
background-color: red;
margin: 0 auto;
position:relative;
margin-top:50%; //problem here
}
#content {
position: absolute;
width:950px;
height: 950px;
margin: 0 auto;
background-color: green;
}
#replace {
width:950px;
height:500px;
}
</style>
<div id="replace">
<div id = "content"></div>
<div id="modal"></div>
</div>
thanks
demo
Instead of margin you need to use top:325px; for #modal
If it's not too much trouble to have the modal inside the content div, you might want to try this HTML:
<div id = "content">
<div id="modal"></div>
</div>
...with this CSS:
#modal {
width: 300px;
height: 300px;
background-color: red;
position: absolute;
top: 50%;
left: 50%;
margin-left: -150px;
margin-top: -150px;
}
#content {
position: absolute;
width: 550px;
height: 550px;
background-color: green;
}
Demo
Basically you're absolutely-positioning the modal div inside the content div, and telling it to go start at 50% from the top and 50% from the left. This will center the top-left corner of the modal, but not the div as a whole. To center the div as a whole, you then have to add a negative margin to move it back up and to the left. The amount of the negative margin is half the height/width of the modal div.
If you want to keep the same HTML, you can still accomplish the same thing using this technique, just make sure to do position: relative on your replace div so that any absolutely-position children are positioned relative to it.
Add position: relative; to your container if you want absolutely positioned elements inside it to be positioned relative to it:
#replace {
position: relative;
width: 950px;
height: 500px;
}
Then set to top value of the item you want to position. One thing to note here, your #replace div is the container here, but it's smaller than the #content div, so when you position #modal, you're going to have to give it specific pixel values to get it centered over #content.