I want to organize my three div elements so that the look like in the picture beliow. How can I do that?
This is some basic code
/* for demo purposes */
html, body, #container {
text-align: center;
height: 100%;
}
/* main container */
#container {
position: relative;
}
#red {
height: 50%;
background:red;
}
#green {
background:green; height: 50%;
}
#yellow {
background:yellow;
position: absolute;
width: 50%;
height: 50%;
/* vertical centering */
top:50%;
transform:translateY(-50%);
/* horizontal centering */
left: 0;
right: 0;
margin:0 auto;
}
<div id="container">
<div id="red">Top</div>
<div id="green">Bottom</div>
<div id="yellow">Middle</div>
</div>
Here you have one option how to do it: https://jsfiddle.net/x91qdxxh/
HTML:
CSS:
.full {
width: 200px;
height: 200px;
}
.upper {
background-color: red;
width: 100%;
height: 100px;
}
.lower {
background-color: green;
width: 100%;
height: 100px;
}
.middle {
background-color: yellow;
position: relative;
left: 50px;
top: -150px;
width: 100px;
height: 100px;
}
Related
I have this HTML:
<div id="container">
<div id="content"></div>
<div id="close-button"></div>
</div>
and this CSS:
#container {
width: 50%;
}
#content {
width: 100%;
height: 50px;
background-color: gray;
}
#close-button {
float: right;
margin-left: 100%;
height: 50px;
width: 50px;
background-color: red;
}
JSFiddle: https://jsfiddle.net/Le53m70b/
How can I make the red box overlaid on top of the gray one, instead of being on a separate line? Note that the size of the container is not fixed, but regardless of its width, I'd like the gray box to cover 100% of it and the red box to be at its very right.
Ah, this finally works: https://jsfiddle.net/Le53m70b/1/
#container {
position: relative;
width: 50%;
}
#content {
width: 100%;
height: 50px;
background-color: gray;
}
#close-button {
position: absolute;
right: 0;
top: 0;
height: 50px;
width: 50px;
background-color: red;
}
You can use z-index property. Which is used to overlay an individual div over another div element.
#container{
width: 200px;
height: 200px;
position: relative;
margin: 20px;
}
#content{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
opacity: 0.8;
}
#close-button{
z-index: 9;
margin: 20px;
}
What is the best way to align a fixed div within a relative div to the right, while still keeping an inherited max-width?
Update (Jan 24, 2018): I've answered this question with the solution. See here.
See the following snippet for further reference:
body {
margin: 0;
padding: 0;
border: 0;
}
.container {
width: 100%;
}
.max-width {
margin: 0 auto;
max-width: 500px;
height: 1000px;
position: relative;
box-sizing: border-box;
background-color: lightgrey;
}
.box {
max-width: inherit;
width: 20%;
height: 20px;
position: fixed;
background: blue;
float: right;
color: white;
text-align: center;
right: 0;
}
<div class="container">
<div class="max-width">
<div class="box">fix to right?</div>
</div>
</div>
A fixed element's position is always relative to the viewport/window, never to any other element.
The only thing you can do (with CSS) is to use right: calc(50% - 250px); for its position to have it right aligned to the right border of the 500px wide centered "parent" element, but that will only work if the screen is wider or equal to the max-width of the "parent" element.
Addition after comments: Plus add a media query for screens below 500px width with right: 0 (thanks to #MrLister for that)
body {
margin: 0;
padding: 0;
border: 0;
}
.container {
width: 100%;
}
.max-width {
margin: 0 auto;
max-width: 500px;
height: 1000px;
position: relative;
box-sizing: border-box;
background-color: lightgrey;
}
.box {
max-width: inherit;
width: 20%;
height: 20px;
position: fixed;
top: 0;
right: calc(50% - 250px);
background: blue;
float: right;
color: white;
text-align: center;
}
#media (max-width: 500px) {
.box {
right: 0px;
}
}
<div class="container">
<div class="max-width">
<div class="box">fix to right?</div>
</div>
</div>
What if you did this:
Css
body {
margin: 0;
padding: 0;
border: 0;
}
.container {
width: 100%;
}
.max-width {
margin: 0 auto;
max-width: 500px;
height: 1000px;
position: relative;
box-sizing: border-box;
background-color: lightgrey;
}
.box {
max-width: inherit;
width: 20%;
height: 20px;
position: fixed;
top: 0;
right: calc(50% - 250px);
background: blue;
float: right;
color: white;
text-align: center;
}
#media screen and (max-width: 500px) {
.box {
right: 0;
}
}
#media screen and (min-width: 501px) {
.box {
width: 100px; /* 100px is 20% of the max-width */
}
}
Html
<div class="container">
<div class="max-width">
<div class="box">fix to right?</div>
</div>
</div>
Figured something out. It can be done after all!
body {
margin: 0;
padding: 0;
border: 0;
width: 100%;
}
.max-width {
max-width: 500px;
height: 2000px;
margin: auto;
background-color: lightgrey;
position: relative;
}
.box1 {
position: relative;
width: 20%;
height: 100px;
background-color: yellow;
text-align: center;
}
.container {
position: absolute;
width: 60%;
background-color: purple;
height: 100%;
margin: 0 auto;
left: 0;
right: 0;
top: 0;
text-align: center;
}
.wrap-box {
position: fixed;
max-width: 500px;
width: 100%;
height: 100%;
left: 50%;
transform: translateX(-50%);
top: 0;
}
.wrap-box > div.box2 {
width: 20%;
height: 100px;
background-color: blue;
position: absolute;
top: 0;
right: 0;
text-align: center;
}
.wrap-box > div.box3 {
width: 20%;
height: 100px;
background-color: green;
position: absolute;
bottom: 0;
right: 0;
text-align: center;
}
<div class="max-width">
<div class="box1">position: relative, width: 20%</div>
<div class="container">
position: absolute, width: 60%
<div class="wrap-box">
<div class="box2">position: fixed (top), width: 20%</div>
<div class="box3">position: fixed (bottom), width: 20%</div>
</div>
</div>
</div>
I wish to include 4 divs inside a parent div in the following manner:
I could use fixed position and set right/left/top/bottom = 0 accordingly for each child div if they were not inside in a div, but right now, I can't figure out how to do this.
Here you go, but I'm not sure how this will fare in responsiveness since the parent has fixed sizes, but the child div should be able to adapt if the parent changes size. Some css can be combined, but I separated them all for reference
.parent {
width: 300px;
height: 300px;
position: relative;
border: 1px solid black;
}
.div1 {
position: absolute;
bottom: 0;
right: 0;
width: 80%;
height: 20%;
background-color: green;
}
.div2 {
position: absolute;
top: 0;
right: 0;
width: 20%;
height: 80%;
background-color: blue;
}
.div3 {
position: absolute;
top: 0;
left: 0;
width: 80%;
height: 20%;
background-color: red;
}
.div4 {
position: absolute;
bottom: 0;
left: 0;
width: 20%;
height: 80%;
background-color: brown;
}
<div class="parent">
<div class="div1">
DIV1
</div>
<div class="div2">
DIV2
</div>
<div class="div3">
DIV3
</div>
<div class="div4">
DIV4
</div>
</div>
Consider utilizing absolute positioning on nested div elements and offsetting their positions, within the containing element, appropriately and as required by declaring top, bottom, left and right properties respectively.
Code Snippet Demonstration
Note:
In the below demonstration, a containing element, with resizing properties, has been wrapped around the element in question, to demonstrate the responsive behaviour of this method.
Resize the element manually by clicking the icon, in the bottom-left corner of the containing element, and dragging vertically or horizontally.
* {
box-sizing: border-box;
font-family: arial;
}
.outer {
border: 3px solid black;
width: 100%;
height: 100%;
position: relative; /* required */
}
.outer-wrapper { /* purely for the sake of responsive demonstration */
padding: 10px;
resize: auto;
overflow: hidden;
border: 3px dashed gray;
width: 400px;
height: 400px;
}
.outer div {
position: absolute;
padding: 10px;
font-weight: bold;
font-size: 12px;
}
.outer div:nth-child(odd) {
width: 80%;
height: 20%;
}
.outer div:nth-child(even) {
width: 20%;
height: 80%;
}
.outer div:nth-child(1) {
background: #ed1c24;
left: 0;
top: 0;
}
.outer div:nth-child(2) {
background: #00a2e8;
right: 0;
top: 0;
}
.outer div:nth-child(3) {
background: #22b14c;
right: 0;
bottom: 0;
}
.outer div:nth-child(4) {
background: #b97a57;
left: 0;
bottom: 0;
}
<div class="outer-wrapper">
<div class="outer">
<div>Div 1</div>
<div>Div 2</div>
<div>Div 3</div>
<div>Div 4</div>
</div>
</div>
It will be helpful to you
.parent{
position: relative;
width: 100%;
height: 100vh;
border: 1px solid black;
}
.parent>div{
position:absolute;
text-align:center;
}
.one{
background-color: green;
bottom: 0;
right: 0;
width: 80%;
height: 20%;
}
.two{
background-color: blue;
top: 0;
right: 0;
width: 20%;
height: 80%;
}
.three{
background-color: red;
top: 0;
left: 0;
width: 80%;
height: 20%;
}
.four{
background-color: brown;
bottom: 0;
left: 0;
width: 20%;
height: 80%;
}
<div class="parent">
<div class="one"> Div1</div>
<div class="two">Div2</div>
<div class="three">Div3</div>
<div class="four">Div4</div>
</div>
Please see the code in jsbin
Screenshot:
All I need is just to have blue on top, then white, then greens. So ideally:
I tried z-index, create stacking context... nothing worked.
It might have something to do with negative margin in CSS
I'm happy to change the HTML code or change the current CSS, as long as I can get the desired effect.
.left,
.right {
width: 200px;
height: 60px;
background-color: green;
display: inline-block;
}
.bar {
width: 20px;
height: 60px;
background-color: blue;
display: inline-block;
}
.circle {
height: 40px;
width: 40px;
background-color: white;
border-radius: 50%;
margin-left: -10px;
margin-top: 10px;
}
<div class="out">
<div class="left"></div>
<div class="bar">
<div class="circle"></div>
</div>
<div class="right"></div>
</div>
Edit
I should have mentioned that my difficulty was mostly achieving the effect while keeping the current HTML setup (i.e. circle in bar). Turns out it doesn't seem possible, because
If no zindex on bar, can't make sure it's on top of circle
If set zindex on bar, then it creates new stacking context, then circle can't be on top of 2 greens. Because greens are on different stacking context
you can simplify this using just the div out with position + z-index
.out {
position: relative;
width: 400px;
height: 60px;
background-color: green;
}
.bar {
width: 20px;
height: 60px;
background-color: blue;
display: inline-block;
position: absolute;
top: 0;
left: 50%;
z-index: 10
}
.circle {
height: 40px;
width: 40px;
background-color: white;
border-radius: 50%;
margin-left: -10px;
margin-top: 10px;
position: absolute;
top: 0;
left: 50%;
z-index: 1
}
<div class="out">
<div class="circle"></div>
<div class="bar"></div>
</div>
EDITED : edited my answer after reading more carefully :) sorry about that
see here > jsFiddle
or snippet below :
.left, .right {
width: 200px;
height: 60px;
background-color: green;
display: inline-block;
position:relative;
z-index:1;
}
.bar {
width: 20px;
height: 60px;
background-color: blue;
display: inline-block;
z-index:6;
position:relative;
}
.circle {
height: 40px;
width: 40px;
background-color: white;
border-radius: 50%;
top: 10px;
position:absolute;
left:0;
right:0;
margin:0 auto;
z-index:5;
}
.out {width:420px;position:relative;}
<div class="out">
<div class="left"></div><div class="bar"></div><div class="circle"></div><div class="right"></div>
</div>
OR if you don't want different bg color for .left and .right just use one big div .out and position the bar and circle on top of it :
.out {
position: relative;
width: 420px;
height: 60px;
background-color: green;
}
.bar {
width: 20px;
height: 100%;
background-color: blue;
position: absolute;
left: 0;
right:0;
margin:0 auto;
z-index: 2
}
.circle {
height: 40px;
width: 40px;
background-color: white;
border-radius: 50%;
position: absolute;
top: 10px;
left: 0;
right:0;
margin:0 auto;
z-index: 1
}
<div class="out">
<div class="bar"></div>
<div class="circle"></div>
</div>
What if we just interchange .bar as child element of .circle. And try as below,
.left, .right {
width: 200px;
height: 60px;
background-color: green;
display: inline-block;
}
.bar {
width: 20px;
height: 60px;
background-color: blue;
margin:-10px 10px;
}
.circle {
height: 40px;
width: 40px;
background-color: white;
border-radius: 50%;
display:inline-block;
position:absolute;
margin:10px -20px;
}
<div class="out">
<div class="left"></div>
<div class="circle"><div class="bar"></div></div>
<div class="right"></div>
</div>
You could even further simplify your markup and utilize a pseudo selector instead of wrestling with stacking order, and order elements naturally.
.out {
width: 400px;
padding: 10px 0;
background: green;
}
.circle {
height: 40px;
width: 40px;
background-color: white;
border-radius: 100%;
display: block;
margin: 0 auto;
position: relative;
}
.circle:after {
content: '';
width: 20px;
height: 60px;
background-color: blue;
display: block;
margin: 0 auto;
position: absolute;
top: -10px;
left: 10px;
}
<div class="out">
<div class="left"></div>
<div class="circle"></div>
<div class="right"></div>
</div>
Use transform.
https://jsbin.com/geconefine/1/edit?html,css,output
.out{
position: relative;
z-index: 0;
}
.left, .right {
width: 200px;
height: 60px;
background-color: green;
display: inline-block;
position: relative;
z-index: -2;
}
.bar {
width: 20px;
height: 60px;
background-color: blue;
display: inline-block;
position: relative;
}
.circle {
height: 40px;
width: 40px;
background-color: white;
border-radius: 50%;
transform: translateX(-10px);
margin-top: 10px;
position: relative;
z-index: -1;
}
You need a position before z-index will do anything. Since I don't see any applied in your current css that might be your issue.
.left, .right{
position: relative;
z-index: 1;
}
.circle{
position: relative;
z-index: 4;
}
.bar{
position: relative;
z-index: 5;
}
I want to achieve same thing horizontally as you can see here vertically and IE9+ compatible
[Edit]: I would like to have middle content on overflow have scroll bar, in this case tabling won't help.
jsFiddle
Css:
.container{
width: 100%;
height: 100%;
position: relative;
background-color: silver;
}
.top{
width: 50px;
height: 100%;
position: relative;
float: left;
background-color: red;
}
.bottom{
width: 50px;
height: 100%;
position: relative;
float: right;
background-color: green;
}
.middle{
background-color: blue;
overflow: hidden;
height: 100%;
}
HTML:
<div class="container">
<div class="top"></div>
<div class="bottom"></div>
<div class="middle"></div>
</div>
Question: Is it possible without javascript and any fixed values?
I don't want to do something like this:
.top-div {
height: 50px;
position: absolute;
top: 0;
left: 0;
right: 0;
}
.middle-div{
top: 50px;
bottom: 50px;
left: 0;
right: 0;
position: absolute;
}
.bottom-div{
height: 50px;
bottom: 0;
left: 0;
right: 0;
position: absolute;
}
In this scenario I'm forced to use JavaScript if I want to change height of footer or header.
using calc from css3
the style:
body,html{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.container{
height: 100%;
background-color: silver;
}
.container,.top, .bottom, .middle{
display:block;
clear:both;
position: relative;
width: 100%;
}
.top{
height: 50px;
width: 100%;
background-color: red;
}
.bottom{
height: 50%;
position: relative;
background-color: green;
}
.middle{
background-color: blue;
overflow: hidden;
-webkit-height: calc(100% - 100px);
-moz-height: calc(100% - 100px);
height: calc(100% - 100px);
}
the markup:
<div class="container">
<div class="top"></div>
<div class="middle"></div>
<div class="bottom"></div>
</div>
Demo: http://jsfiddle.net/YL4f3/1/
For now you have to give height to your containers. Once you have the content in place, just change the height to auto.
Also, when you change the height to auto, change the margin-top for the middle div as per your page needs.
<style>
.container div{
float:left; }
.container{
width: 100%;
height: 100%;
position: relative;
background-color: silver;
}
.top{
width: 100%;
height: 100px;
position: fixed;
top:0;
background-color: red;
}
.bottom{
width: 100%;
height: 100px;
position: fixed;
bottom:0;
background-color: green;
}
.middle{
margin-top:100px;
width: 100%;
background-color: blue;
height: 1000px;
}
</style>
<div class="container">
<div class="top"></div>
<div class="bottom"></div>
<div class="middle"></div>
</div>