I'm trying to create a layout with a header, a main content area and a footer.
Both header and footer are fixed height but content area needs to fill the width and height (without scrollbars)
the current code is here
<div class="outer">
<header>
movistar ovacion
</header>
<div id="content" >
<section class="step-1">
<div class="box">
HOMBRE
</div>
<div class="box">
MUJER
</div>
<div class="box">
NIÑO
</div>
<div class="box">
NIÑA
</div>
</section>
</div>
<footer>
footer
</footer>
</div>
The CSS:
html,body{
height: 100%;
}
header {
height: 160px;
background: blue;
}
#content {
}
footer {
height: 60px;
position:absolute;
width:100%;
bottom:0;
background: green;
}
.outer {
}
.step-1 > div {
width: 50%;
height: 50%;
position: absolute;
}
.step-1 > div:first-child {
background: #DDD;
left: 0;
}
.step-1 > div:nth-child(2) {
background: #CCC;
right: 0;
}
.step-1 > div:nth-child(3) {
background: #72CCA7;
left: 0;
bottom: 0;
}
.step-1 > div:nth-child(4) {
background: #10A296;
right: 0;
bottom: 0;
}
Right now the content area doesn't work as it should, the 4 boxes doesn't adapt to the height.
I think i'm doing something wrong with div positions or clearings but i can't find the problem.
How can i fix it? Is there a better way of doing this layout?
The problem is that the first and second <div> element within the .step-1 don't have an explicit top value. Hence the next absolutely positioned DIVs overlap those two:
.step-1 > div:first-child {
background: #DDD;
left: 0;
top: 0; /* Added declaration */
}
.step-1 > div:nth-child(2) {
background: #CCC;
right: 0;
top: 0; /* Added declaration */
}
On the other hand, the #content itself should be positioned absolutely in this case in order to fill the remaining space between the header and the footer:
#content {
position: absolute;
top: 160px; /* = height of the header */
bottom: 60px; /* = height of the footer */
width: 100%;
}
WORKING DEMO.
Personally, I prefer creating a new containing block for the absolutely positioned elements instead of relying to the initial containing block. Because of that, In the above demo I positioned the .outer element relatively:
.outer {
position: relative;
height: 100%;
}
Adding right: 0; seem to helped
top: 100%;
left: 0;
right: 0;
Related
I am trying out CSS grid layout and currently facing a problem. I would like to use position: absolute for a child of a div positioned in a grid. As you can see below (code snippet) the red box is set with position: absolute and is a child of .left.
How do I make it so that the red box visually stays in the orange div (left side) and doesn't "overflow" in the brown div (right side)?
I have tried setting position: relative to the parent element, without result.
Below is a simplified version showing the problem (you can modify the value to see the separator move)
html,
body,
section {
height: 100%;
margin: 0px;
padding: 0px;
}
.window {
display: grid;
grid-template-areas: "first seperator last";
grid-template-columns: 100px 10px auto;
/* | this one */
}
.left {
background: #ff9e2c;
grid-area: first;
position: relative;
}
.right {
background: #b6701e;
grid-area: last;
}
.separator {
background: white;
}
.abs-pos {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
top: 100px;
left: 75px;
}
<section class="window">
<div class="left">
<div class="abs-pos"></div>
</div>
<div class="separator"></div>
<div class="right"></div>
</section>
The following is a GIF of the problem:
PS: In the actual file I have a JS script that allows me to move the .separator div horizontally to change the sizes of the two divs: .left and .right. It basically modìfies the property grid-template-columns: 100px 10px auto of .window therefore resizing the grid.
Setting overflow: hidden; on the .left pane will keep the red box from showing up outside its parent's bounds.
html,
body,
section {
height: 100%;
margin: 0px;
padding: 0px;
}
.window {
display: grid;
grid-template-areas: "first seperator last";
grid-template-columns: 100px 10px auto;
/* | this one */
}
.left {
background: #ff9e2c;
grid-area: first;
position: relative;
overflow: hidden;
}
.right {
background: #b6701e;
grid-area: last;
}
.separator {
background: white;
}
.abs-pos {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
top: 100px;
left: 75px;
}
<section class="window">
<div class="left">
<div class="abs-pos"></div>
</div>
<div class="separator"></div>
<div class="right"></div>
</section>
Have you tried to give your classes a z-index
z-index: -1;
Z index sets the stack order And works with positioned elements. I.e absolute, relative, fixed.
So if you can give your .right and or .seperator class a position relative it should work.
.right {
position:relative;
z-index: 1;
}
.separator {
position:relative;
z-index: 1;
}
.abs-pos {
position:absolute;
z-index: -1;
}
Is there a CSS equivalent to vmin that is relative to the smaller dimension of the parent element rather than the viewport?
I have a page with a navigation panel on the left, so only part of the viewport width is available to the main content, and I am trying to have a responsive square that does not overflow from the main <div>. I found the code for the responsive square as an answer to this question, but the square's height overflows when in landscape mode.
I could use JavaScript by listening to window resizing to recompute the square's width as the minimal dimension between the parent's width and height, but in my actual website, the parent is most of the time in display: none so it has no width and I would like to avoid the need to recompute the dimensions when it appears.
Here's a JsFiddle with an example and backgrounds to highlight the issue : https://jsfiddle.net/wy874pqv/4/.
Below is the code I used.
HTML :
<body>
<div id="main">
<div class="wrapper">
<div class="one-by-one aspect-ratio"></div>
<div class="content">
<div class="circle">
</div>
</div>
</div>
</div>
<div id="leftPanel">
</div>
</body>
CSS :
body {
height: 100vh;
padding: 0;
margin: 0;
}
div#leftPanel {
height: 100%;
width: 20%;
position: absolute;
left: 0;
margin: 0;
background: red;
}
div#main {
height: 100%;
width: 80%;
position: absolute;
right: 0;
margin: 0;
background: yellow;
}
.wrapper {
position: relative;
width: 100%;
background: rgba(0, 255, 0, 0.3);
}
.one-by-one.aspect-ratio {
padding-bottom: 100%;
}
.wrapper > .content {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
padding: 10%;
}
.circle {
position: relative;
height: 100%;
border: dashed 1px;
border-radius: 50%;
}
I have 2 divs in a row (with inline-blocks). One of them has a fixed width and the other one is supposed to automatically fill the left space. How can I do that?
My favorite solution is to use padding on the container block and absolute position on the fixed with object:
.wrapper {
padding-left: 100px;
position: relative;
}
.stay {
width: 100px;
position: absolute;
left: 0;
top: 0;
/* for demo */
height: 50px;
background-color: pink;
}
.fit {
width: 100%;
/* for demo */
height: 50px;
background-color: red;
}
HTML:
<div class="wrapper">
<div class="stay"></div>
<div class="fit"></div>
</div>
I want to fix position of div with respect to it's container div, NOT with respect to body. I played a lot and searched as well but didn't find the solution.
Please not .container and .content both are of responsive height and can't take a fixed height. height:2000px; given to .container for demontration purposes only.
While the actual case is: heights are responsive. Here is jsFiddle
<div class="content">content<br>content<br>content<br>content<br>content
</div>
<div class="container">content
<div class="loaderWrap">
<div class="loader2">Loading Spinner</div>
</div>
</div>
CSS:
.content {
background:green;
}
.container {
position: relative;
background:orange;
height:2000px;
}
.loaderWrap {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: red
}
.loader2 {
position: fixed;
top: 50%;
left: 50%;
}
I want:
<div style="height:100%">
<div style="height:70px;">header</div>
<div style="overflow-y:scroll;">main</div>
<div style="height:60px;">footer, alw. at bottom parent-div</div>
</div>
The real (px) container height may change dep on client window-size,
height of footer and header set in css-theme.
All positioning should be relative. Is JS required to solve this?
(Tried height:auto on main, seem to have no effect.)
You can use absolute positioning to achieve this quite easily, why should it be positioned relative?.
#header, #main, #footer {
left: 0;
right: 0;
position: absolute;
}
#header {
top: 0;
height: 70px;
background-color: yellow;
}
#main {
top: 70px;
bottom: 60px;
background-color: lime;
overflow: auto;
}
#footer {
bottom: 0;
height: 60px;
background-color: red;
}
JSFiddle: http://jsfiddle.net/Tg8g5/