I have a certaing layout of nested divs. One of them I would like to expand beyond its parent. However, with this nesting it's not that simple - I think.
Html:
<div class="wrapper">
<div class="gridcontent">
<div class="gcrow single-column">
<div class="gccolumn">
<div class="gccolumn-inner">
<div class="gcitem">
<p>Extend to .wrapper width</p>
</div>
</div>
</div>
</div>
</div>
</div>
I can't change the html, and there may be other .gcrows that need to stay inside the container. Is this possible to to at all?
Fiddle here.
I hope my question makes sense.
For your current HTML structure you can use .gcrow:first-child and set min-width: 100vw which is same as wrapper width if you remove default margin and padding from html, body.
You can use position: relative, left: 50% and to make it center just add transform: translateX(-50%), here is Fiddle
body,
html {
margin: 0;
padding: 0;
}
* {
box-sizing: border-box;
}
.wrapper {
width: 100%;
padding-left: 20px!important;
padding-right: 20px!important;
border: 1px solid pink;
}
.gridcontent {
width: 100%;
max-width: 1018px;
border: 1px solid #333;
margin: 0 auto;
}
.gcrow {
max-width: 100%;
width: 100%;
border: 1px solid #f00;
}
.gcrow:first-child {
min-width: 100vw;
position: relative;
left: 50%;
transform: translateX(-50%);
}
<div class="wrapper">
<div class="gridcontent">
<div class="gcrow single-column">
<div class="gccolumn">
<div class="gccolumn-inner">
<div class="gcitem">
<p>Extend to .wrapper width</p>
</div>
</div>
</div>
</div>
<div class="gcrow single-column">
<div class="gccolumn">
<div class="gccolumn-inner">
<div class="gcitem">
<p>Leave me alone</p>
</div>
</div>
</div>
</div>
</div>
</div>
Also its box-sizing: border-box not box-border
try something like this
.gcrow {
position: relative;
overflow: visible;
}
.gcitem {
position: absolute;
right: 0;
top: 0;
}
Related
I want to make this:
stacked cards
the html would look like so:
<div class="container>
<div class="top-card>
<div class="card-content">
...
</div>
</div>
<div class="bottom-card>
</div>
</div>
I am having trouble styling this so that the height of the entire card adjusts automatically according to the content inside the top card. Thank you in advance.
you can use a combination of box-shadow and display: inline-block to accomplish what you are trying to do. I have updated the answer. Here is the code:
.grandparent {
display: inline-block;
position: relative;
}
.parent {
display: inline-block;
background: blue;
position: absolute;
top: 0;
left: 0;
}
.child {
width: 100px;
height: 100px;
background: red;
margin: 5px;
}
.shadow {
margin-left: -7px;
margin-top: -7px;
background: pink;
z-index: -100;
border: 1px solid green;
}
.empty {
opacity: 0;
}
<div class="grandparent">
<div class="parent">
<div class="child"></div>
</div>
<div class="parent shadow">
<div class="child empty"></div>
</div>
</div>
how can I make the child take the full width of the page
<div class='container'>
<div class='child'>
something
</div>
</div>
.container {
width: 90%;
margin: 0 auto;
}
.child {}
Consider negative margin.
.container {
width: 90%;
margin: 0 auto;
padding: 10px 0;
background: red;
}
.child {
height: 50px;
background: blue;
margin: 0 calc(-5% / 0.9);
/*
The container is taking 90% of 100% so we are missing 10%
we plit this value on both sides (5% + 5%) and since percentage is relative
to parent so to make the percentage inside .child relative to body
we divide by the percentage of container
it should be then 5%/0.9 or 5%*1.11
*/
}
body {
margin: 0;
}
<div class='container'>
<div class='child'>
something
</div>
</div>
With CSS variable you can have something more dynamic:
.container {
width: calc(var(--s)*100%);
margin: 5px auto;
padding: 10px 0;
background: red;
}
.child {
height: 50px;
background: blue;
margin: 0 calc((-50% * (1 - var(--s))) / var(--s));
}
body {
margin: 0;
}
<div class='container' style="--s:0.8">
<div class='child'>
something
</div>
</div>
<div class='container' style="--s:0.5">
<div class='child'>
something
</div>
</div>
<div class='container' style="--s:0.2">
<div class='child'>
something
</div>
</div>
In case the container is not centered simply put all the missing margin on one side:
.container {
width: calc(var(--s)*100%);
margin: 5px 0;
padding: 10px 0;
background: red;
}
.child {
height: 50px;
background: blue;
margin-right:calc((-100% * (1 - var(--s))) / var(--s));
}
body {
margin: 0;
}
<div class='container' style="--s:0.8">
<div class='child'>
something
</div>
</div>
<div class='container' style="--s:0.5">
<div class='child'>
something
</div>
</div>
<div class='container' style="--s:0.2">
<div class='child'>
something
</div>
</div>
PS: the use of vw isn't a good idea because it includes the width of the scroll. So you will have overflow.
.box {
height:50px;
background:red;
width:100vw;
border:5px solid green;
box-sizing:border-box;
}
body {
margin:0;
min-height:200vh;
}
<div class="box"></div>
You can position the child relative and left: 50% and then translate it by -50% in the x-axis to re-align it with the edge of the screen. This works because left: 50% is half of the parent width while the transform: translateX(-50%) is half of the element itself. This relies on the original container being centered so may not work for all cases.
.container {
background: gray;
width: 80%;
margin: auto;
}
.child {
position: relative;
left: 50%;
transform: translateX(-50%);
width: 100vw;
background: red;
}
<div class='container'>
<div>Centered</div>
<div class='child'>Something</div>
<div>Centered</div>
<div>Centered</div>
<div>Centered</div>
</div>
.child {
width: 100%;
position: absolute;
}
I have a div that has a fixed height of 20cm. Now, the inner page needs to have padding and position absolute needs to respect that padding.
How can I make the red box fill always what's left? The position absolute item needs to be always at the bottom no matter what.
It needs to have one class, and not 10classes with 10different heights like 58%, 45% etc...
If you check the codepen: https://codepen.io/Aurelian/pen/MqxvgW
Here's the HTML:
<div class="page">
<div class="image"></div>
<div class="page-inner-default">
<p>hello</p>
<span class="pos-bot">Hi</span>
</div>
</div>
<div class="page">
<div class="image"></div>
<h1>Heading</h1>
<div class="page-inner-default">
<p>hello</p>
<span class="pos-bot">Hi</span>
</div>
</div>
Here's the CSS:
*, *:before, *:after {
box-sizing: border-box;
}
body {
background: grey;
box-sizing: border-box;
}
.image {
height: 250px;
border: 1px solid green;
background: green;;
}
.pos-bot {
position: absolute;
bottom: 0;
}
.page {
height: 20cm;
background-color: white;
width: 16cm;
margin: 50px auto;
display: inline-block;
vertical-align: top;
position: relative;
}
.page-inner-default {
position: relative;
padding: 50px;
height: 100%;
border: 1px solid red;
}
.image {
}
Give the .page{overflow:hidden} and remove the position relative from the .page-inner-default so the .pos-bot will be positioned to the closest relative and in this case it is the .page div
*, *:before, *:after {
box-sizing: border-box;
}
body {
background: grey;
box-sizing: border-box;
}
.image {
height: 250px;
border: 1px solid green;
background: green;;
}
.pos-bot {
position: absolute;
bottom: 0;
}
.page {
overflow: hidden;
height: 20cm;
background-color: white;
width: 16cm;
margin: 50px auto;
display: inline-block;
vertical-align: top;
position: relative;
}
.page-inner-default {
padding: 50px;
min-height: 100%;
border: 1px solid red;
}
<div class="page">
<div class="image"></div>
<div class="page-inner-default">
<p>hello</p>
<span class="pos-bot">Hi</span>
</div>
</div>
<div class="page">
<div class="image"></div>
<h1>Heading</h1>
<div class="page-inner-default">
<p>hello</p>
<span class="pos-bot">Hi</span>
</div>
</div>
i have a problem with html or css or both. i am looking for a possibility to create a bar that crosses all divs. The picture above demonstrates my project.
I would like to do it in css rather than to place a separate picture. Is that possible?
thanks ahead.
Look into the CSS position property.
.child {
height: 100px;
background-color: blue;
margin: 5px 0;
border-radius: 8px;
}
.container {
position: relative;
}
.left-bar {
position: absolute;
background-color: red;
height: 100%;
width: 20%;
border-radius: 8px;
}
<div class="container">
<div class="left-bar">
</div>
<div class="child">
</div>
<div class="child">
</div>
<div class="child">
</div>
</div>
I'm having troubles positioning my divs. I want to have my child div stick to the bottom of the parent div, with grandchild_1 and grandchild_2 staying correctly put. By that, I mean having grandchild_1 before grandchild_2, like on the picture.
This is what I've tried, but the "child" div sticks to the top :
#parent {
position: relative;
}
#child {
position: absolute; bottom: 0;
}
<div id="parent">
<div id="child">
<div id="grandchild_1">
</div>
<div id="grandchild_2">
</div>
</div>
</div>
Anyone knows how I should proceed ? Thanks !
If you specify a height on the parent it will stick to the bottom.
Example: http://codepen.io/anon/pen/wGqzVd
HTML
<div id="parent">
Parent
<div id="child">
Child
<div id="grandchild_1">
Grandchild 1
</div>
<div id="grandchild_2">
Grandchild 2
</div>
</div>
</div>
CSS
div {
padding: 5px;
}
#parent {
position: relative;
background: lightgray;
height: 200px;
width: 150px;
}
#child {
position: absolute;
bottom: 5px;
background: yellow;
}
#grandchild_1 {
background: pink;
}
#grandchild_2 {
background: lightblue;
}
The provided code works as is...assuming that the parent has a height greater than that of the child.
#parent {
position: relative;
height: 200px;
background: pink;
}
#child {
position: absolute;
width: 100%;
bottom: 0;
background: green;
}
#grandchild_1,
#grandchild_2 {
height: 25px;
background: red;
margin: 10px;
}
<div id="parent">
<div id="child">
<div id="grandchild_1">GC1
</div>
<div id="grandchild_2">GC2
</div>
</div>
</div>
As an alternative to positioning, flexbox can do the same...and the child will affect the height of the parent which an absolutely positioned child cannot.
#parent {
position: relative;
height: 200px;
background: pink;
display: flex;
flex-direction: column;
justify-content: flex-end;
}
#child {
width: 100%;
background: green;
}
#grandchild_1,
#grandchild_2 {
height: 25px;
background: red;
margin: 10px;
}
<div id="parent">
<div id="child">
<div id="grandchild_1">GC1
</div>
<div id="grandchild_2">GC2
</div>
</div>
</div>