I got two divs. The second div should be on first div, so... When clicking at menu buttons in first div, there should appear second div on first div (the second div covers the first one). I created the second div under first one, gave to it relative position, and took it up to first one. But there is a problem. There is an overflow, cause the div is long, and div's height saved at bottom. How to do this thing without any problems?
HTML
<div class='wrapper'>
<div class='firstDiv'></div>
<div class='secondDiv'></div>
</div>
CSS
.wrapper{
position: relative;
}
.firstDiv, .secondDiv{
position: absolute;
}
HTML
<div class="one">
<div class="two"></div>
</div>
Css :-
.one
{
width: 170px;
height: 170px;
position: relative;
background: red;
}
.two
{
width: 70px;
height: 70px;
position: absolute;
background: black;
}
jsfiddle demo
http://jsfiddle.net/xnqsF/
Real answer available via css-grid,
setting the parent to display:grid
and the children to grid-row/column-start:1 as shown in the answer below
https://stackoverflow.com/a/50086485/3810321
Related
Is it possible with only CSS to have the following effect:
I have two divs. One follows the other.
Now, if the user starts scrolling down the page (to see other content, more divs if you want..) the second div should "go up" (could also stay fixed and the first div goes down, I mean it would look the same) and overlap the first.
But only overlap for let's say 50px. After that, the behaviour is normal again, meaning that if you scroll further, those divs move out of the browser window eventually.
Have I made myself clear? I can add two coloured boxed to showcase if that helps. I played around a bit and tried parallex/position fixed/sticky mixes, but none seem to work with a given height restriction. I just wonder if this is possible without javascript.
You can get this effect by using position: sticky on both elements. There are a few things that can stop this from taking place, like having overflow: hidden or not having a height set on the parent element.
HTML
<div class="container">
<div class="red-box">This is the red box</div>
<div class="blue-box">this is the blue box</div>
</div>
<!-- needs space to be able to actually scroll on the page -->
<div class="container">
<div class=""></div>
<div class=""></div>
</div>
CSS
/* set the height of the container so that the sticky elements know how far they are meant to scroll */
.container{
min-height: 400px;
}
/* set your position sticky and a attribute that tells it when it should become sticky, in this case right at the top */
.red-box{
height: 400px;
background-color: red;
position: sticky;
top: 0px;
}
.blue-box{
height: 400px;
background-color: blue;
position: sticky;
top: 0px;
}
I have done a quick codepen example so that you can see this working. hope that helps.
https://codepen.io/Domnewmarch/pen/NWzqBde
Solution: I used a combination of negative margin, z-index and position: sticky.
Added margin to the 2nd container to make it more visible.
.sticky-wrapper {
height: 310px;
margin-bottom: -60px;
}
.content {
z-index: -1;
position: sticky;
top: 0;
padding: 0 3%;
height: 250px;
background-color: green;
}
.foo {
margin: 0 50px;
background-color: red;
height: 200px;
}
.next-content {
height: 1000px;
background-color: khaki;
}
<div class="sticky-wrapper">
<div class="content"></div>
</div>
<div class="foo"></div>
<div class="next-content"></div>
I have three divs and each div has two child elements and on hover of first child, the second child (hidden & absolute positioned) should be displayed. This might look simple. But since the second child element is absolute positioned, it is going behind the next sibling of the parent element.
I've tried in all ways like adding z-index dynamically. But no show. I want to make it using only CSS.
.wrapper{
width: 100%;
display: flex;
}
.div{
margin: 0em 1em;
position: relative;
}
.divIn{
width: 190px;
height: 260px;
background: red;
}
.divHover{
display: none;
position: absolute;
left: 0%;
bottom: 2em;
width: 500px;
height: 100px;
background: black;
}
.divIn:hover ~ .divHover, .divHover:hover{
display: block;
}
.clearfix{
clear: both;
}
<div class="wrapper">
<div class="div">
<div class="divIn"></div>
<div class="divHover"></div>
</div>
<div class="div">
<div class="divIn"></div>
<div class="divHover"></div>
</div>
<div class="div">
<div class="divIn"></div>
<div class="divHover"></div>
</div>
<div class="clearfix"></div>
</div>
When first element is hovered, hidden second element should be displayed, but it should not go behind the next sibling of parent.
Solved by adding this to the CSS:
.div:nth-child(1) {
z-index: 3;
}
.div:nth-child(2) {
z-index: 2;
}
.div:nth-child(3) {
z-index: 1;
}
Explanation:
Normally, elements stack in the order that they appear in the DOM (the lowest one down at the same hierarchy level appears on top), so the second .div is on top of the first. That's the reason .divs go behind their next siblings.
When you set the z-index for the child .divHover of the first .div to a higher value, it's still a child of the first .div which is below the second .div, so your desired effect won't happen.
To solve it you need to position the first .div on top of the second. Check the examples here CSS Tricks
If you are expecting the solution as the second child of parent div being on top of next sibling of parent add z-index to class "divHover".
.divHover {z-index: 9;}
I have to create a page with this structure:
Where the RED part has width = 100% and BLUE (and GREEN) part has width 885px.
I thought to create different width, some with width = 885px and the others with width 980px... but I think this is not the right approach... in fact if I have to change the width for example from 885px to 980 px
Another solution I think could be to have to div... the first one has width 100%; the second one, inside the first one, has width 885px. But I think could be difficult to place the green div at the same height/top of the red one on the back.
Which approach would you used to reach the goal?
Thank you
You need to manage simple html like below:
<div class="wrapper">
<div class="wrap"></div>
</div>
.wrapper{
width: 100%;
}
.wrap{
width: 885px;
margin: 0 auto;
}
When you only need full width div don't include .wrap in your html. And when you only need 885px width div exclude .wrapper in your html.
I made a quick example of how you could do this right here. I just made two classes, one that has a width of 100% (red div), and one that has a fixed width (blue div, I used 450px in my example). The green div is just a blue div inside a red div. I hope my example answers all the questions you have. Good luck!
I guess you can manage the red with green band and sencond red band positioning absolutely in a main container, that also contains the blue one with a width. To explain it better i've created a JsFiddle please follow the link to see it working:
Working example
I've use the approach suggested #C-link Nepal, but I think to put red bars this isn't enough.
HTML:
<div class="top"></div>
<div class="main">
<div class="redgreen">
<div class="green"></div>
</div>
<div class="red"></div>
<div class="blue"></div>
</div>
<div class="foot">
</div>
CSS:
.top {
background-color: red;
height: 50px;
}
.main {
text-align: center;
position: relative;
}
.green, .blue {
width: 600px;
margin: 0 auto;
}
.redgreen {
width: 100%;
background-color: red;
position: absolute;
top: 30px;
}
.red {
height: 30px;
position: absolute;
top: 150px;
background-color: red;
width: 100%;
}
.green {
background-color: green;
height: 100px;
}
Please note that most of CSS classes have height and background color to the pattern be drawn...
I've been googling this all morning and can't seem to get it to work:
I have a parent DIV with Relative positioning and a two column child DIV setup inside of it, both positioned Absolute.
I need the parent DIV's height to stretch with the content of the inner DIV's.
I have tried putting a .clearfix type bit before the closing tags for #content but I'm not floating anything. I've also tried adding a float attribute to the #content div to no avail. Can anyone point me to the right direction here. Clearly I'm missing something with how the nested displays affect each other.
CSS:
#content {
width: 780px;
padding: 10px;
position: relative;
background: #8b847d;
}
#leftcol {
width: 500px;
position: absolute;
}
#rightcol {
width: 270px;
position: absolute;
left: 500px;
margin-left: 10px;
text-align: center;
}
HTML:
<div id="content">
<div id="leftcol">
<p>Lorem Ipsum</p>
</div><!-- /leftcol -->
<div id="rightcol">
<img src="images/thumb1.jpg">
<img src="images/thumb2.jpg">
</div><!-- /rightcol -->
<br style="clear:both;">
</div><!-- /content -->
Dark side of the force is a pathway to many abilities some consider to be unnatural.
$(document).ready(function()
{
var objHeight = 0;
$.each($('#content').children(), function(){
objHeight += $(this).height();
});
$('#content').height(objHeight);
});
clearing works but ive had weird results. then i found a post that makes it much easier and perfect in all browsers.
Set your child divs to float:left/right. Then put "overflow:hidden" on the parent. Because you haven't specified a height, it will just wrap to teh child elements perfectly. I haven't use'd clearing for ages now.
Your column divs won't effect their containing div while they have absolute positions as they're removed from the normal page flow.
Instead, try floating them then have a div with clear: both; after them.
I have just been struggling with that for a while and found a real solution CSS-only is to change positioning of 'absolute' divs to 'relative'. This really works!!!
Tested on a Mac, using Safari 5.1.5 and Chrome 21.0....
Hope this will help someone else.
You do not need position: absolute for this task.
#content {
width: 780px;
padding: 10px;
position: relative;
background: #8b847d;
}
#leftcol {
width: 500px;
float: left;
}
#rightcol {
width: 270px;
position: relative;
margin-left: 510px;
text-align: center;
}
I've been searching a lot for a way to allow a div to stick out of its parent.
The parent has float:right and I'm trying to make clicking it toggle show/hide a child element, but the child element shows/hides after the div. I'd like to make it "stick out" of the parent div.
Thanks! :)
Your explanation is not very clear, but here is a demo of a right-aligned parent div with a child div that sticks out. I hope that is what you're looking for :)
#parent {
width: 200px;
height: 200px;
background-color: #FF0000;
float: right;
position: relative;
}
#child {
width: 300px;
height: 100px;
background-color: #00FF00;
position: absolute;
right: 0;
}
<div id="parent">
Parent
<div id="child">
Child
</div>
</div>
overflow: visible; on parent should do the trick - be careful if you have and dimensions set mind!!!