Here is my code:
.absolute_postion{
position: absolute;
border: 1px solid red;
height: 30px;
width: 100%;
clear: both;
}
.other_elements{
border: 1px solid green;
height: 30px;
width: 100%;
}
<div class="wrapper">
<div class="absolute_postion">foo</div>
<div class="other_elements">bar</div>
</div>
As you can see, div.other_elements is under div.absolute_postion. How can I put that in the bottom of div.absolute_postion?
Give top:0 to .absolute_postion class and margin-top:30px to .other_elements.
.absolute_postion{
position: absolute;
border: 1px solid red;
height: 30px;
width: 100%;
clear: both;
top:0;
}
.other_elements{
border: 1px solid green;
height: 30px;
width: 100%;
margin-top:30px;
}
<div class="wrapper">
<div class="absolute_postion">foo</div>
<div class="other_elements">bar</div>
</div>
I see the height of .absolute_postion element is dynamic so you can achieve this with jquery.
You can use height() method to get the pixels of the div and apply margin-top with that value:
var val = $('.absolute_postion').height()
$('.other_elements').css('margin-top', val);
console.log(val)
.absolute_postion{
position: absolute;
border: 1px solid red;
height: 30px;
width: 100%;
clear: both;
top:0;
}
.other_elements{
border: 1px solid green;
height: 30px;
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="absolute_postion">foo</div>
<div class="other_elements">bar</div>
</div>
Note: Remember add top:0 to absolute_postion div.
Just Adding top margin equal to the height of absolute_position div
.absolute_postion {
position: absolute;
border: 1px solid red;
height: 30px;
width: 100%;
clear: both;
top: 0;
}
.other_elements {
border: 1px solid green;
height: 30px;
width: 100%;
margin-top: 32px;
}
<div class="wrapper">
<div class="absolute_postion">foo</div>
<div class="other_elements">bar</div>
</div>
Related
I have done this with below code, But I this it is a difficult way to do this anyone have easy way for create this with css and html.
.fline {
width: 2px;
background-color: black;
height: 10px;
margin-left: 30%;
margin-top: -9px;
}
.fline1 {
width: 2px;
background-color: black;
height: 10px;
margin-left: 60%;
margin-top: -10px;
}
.fline2 {
width: 2px;
background-color: black;
height: 10px;
margin-left: 88.2%;
margin-top: -11px;
}
<hr style="width: 300px;margin-left: 30%;color:black">
<div class="fline"></div>
<div class="fline1"></div>
<div class="fline2"></div>
.scale-container {
width: 300px;
}
.scale {
width: 296px;
height: 20px;
border: 2px solid black;
border-bottom: none;
}
.scale>div {
width: 50%;
height: 20px;
border-right: 2px solid black;
}
.label-container {
width: 100%;
display: flex;
justify-content: space-between;
}
<div class="scale-container">
<div class="scale">
<div></div>
</div>
<div class="label-container">
<div>Low</div>
<div>Average</div>
<div>High</div>
</div>
</div>
In this way you can add as many items as you want.
.p {
display: flex;
position: relative;
padding-top: 15px;
border-top: 2px solid red;
margin-bottom: 30px;
}
.p div {
position: relative;
flex: 1;
text-align: center;
}
.p div:after {
content: '';
position: absolute;
height: 15px;
width: 2px;
background: red;
top: -15px;
}
.p div:not(:first-child):not(:last-child):after {
left: 50%;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
}
.p div:first-child {
text-align: left;
}
.p div:first-child:after {
left: 0;
}
.p div:last-child {
text-align: right;
}
.p div:last-child:after {
right: 0;
}
<div class="p">
<div>
Low
</div>
<div>
Average
</div>
<div>
High
</div>
</div>
<div class="p">
<div>
Low
</div>
<div>
Average -1
</div>
<div>
Average
</div>
<div>
Average 1
</div>
<div>
High
</div>
</div>
<div class="p">
<div>
Low
</div>
<div>
Average -2
</div>
<div>
Average -1
</div>
<div>
Average
</div>
<div>
Average 1
</div>
<div>
Average 2
</div>
<div>
High
</div>
</div>
This is just a sample you can modify it to meet your requirments
.box {
display: flex;
border-top:1px solid #000;
}
.box>div:not(:last-child)
{
border-left:1px solid #000;
}
.box>div:last-child
{
border-right:1px solid #000;
}
.box>div
{
flex: 1 1 auto;
padding:10px;
}
<div class="box">
<div></div>
<div></div>
<div></div>
</div>
.box {
display: flex;
border-top:1px solid #000;
}
.box>div:not(:last-child)
{
border-left:1px solid #000;
}
.box>div:last-child
{
border-right:1px solid #000;
}
.box>div
{
flex: 1 1 auto;
padding:10px;
padding-top:40px;
}
<div class="box">
<div>Low</div>
<div>Average</div>
<div>High</div>
</div>
.grid{width:calc(100% - 20px);max-width:1000px;margin:0 auto;;border-top:3px solid red;display:flex;flex-direction:row;align-items:baseline;justify-content: space-between;}
.fline{position:relative;overflow:hidden;min-height:40px;float: left;padding-top: 20px;}
.fline::before{position:absolute;content:"";top:0;width:2px;height:20px;background:red}
.fline:first-child::before{left:0}
.fline:nth-of-type(2)::before{left:calc(50% - 2px)}
.fline:last-child::before{left:unset;right:0}
<div class="grid">
<div class="fline">Low</div>
<div class="fline">High</div>
<div class="fline">Average</div>
</div>
.fline {
width: 2px;
background-color: black;
height: 10px;
margin-left: 30%;
margin-top: -9px;
}
.fline1 {
width: 2px;
background-color: black;
height: 10px;
margin-left: 60%;
margin-top: -10px;
}
.fline2 {
width: 2px;
background-color: black;
height: 10px;
margin-left: 88.2%;
margin-top: -11px;
}
<hr style="width: 300px;margin-left: 30%;color:black">
<div class="fline">Low</div>
<div class="fline1">Average</div>
<div class="fline2">High</div>
First you need to define one outer wrap and define width as you want to this.
And position:relative for this.
For first inner div with float:left; and last with float:right;.
And center div with position:absolute; with margin:auto; from left and right;
And margin-top depend on your parent div outer-wrap width for inner div like: fline,fline1,fline2
.outer-wrap{
width: 80%;
height: 1px;
background-color: #000;
margin: auto;
text-align: center;
position: relative;
}
.fline {
width: 2px;
background-color: black;
height: 10px;
float: left;
margin-top: 1px;
}
.fline1 {
width: 2px;
background-color: black;
height: 10px;
position: absolute;
top: 0;
left: 0;
right: 0;
margin: auto;
}
.fline2 {
width: 2px;
background-color: black;
height: 10px;
float: right;
margin-top: 1px;
}
<div class="outer-wrap">
<div class="fline"></div>
<div class="fline1"></div>
<div class="fline2"></div>
</div>
This one is the right answer to this question
.scale-container {
width: 300px;
}
.scale {
width: 296px;
height: 20px;
border: 2px solid black;
border-bottom: none;
}
.scale>div {
width: 50%;
height: 20px;
border-right: 2px solid black;
}
.label-container {
width: 100%;
display: flex;
justify-content: space-between;
}
<div class="scale-container">
<div class="scale">
<div></div>
</div>
<div class="label-container">
<div>Low</div>
<div>Average</div>
<div>High</div>
</div>
</div>
This question already has an answer here:
Row-wrap center align in flexbox
(1 answer)
Closed 4 years ago.
So I have this which is supposed to be side by side in the middle before the media query hits and then when it hits it should stack on top of each other.
I have no idea why it's behaving th way it is.
I tried making it centered when ti's at its full width but it doesnt want to center and when I make the browser less than 400px they stack weirdly, they do stack on top but not centered.
.wrapper {
margin-top: 15%;
border : 2px solid #000;
overflow:hidden;
}
.wrapper div {
min-height: 300px;
padding: 10px;
}
#one {
background-color: orange;
float:left;
display: inline;
margin-left: 30%;
height: 400px;
width:250px;
border-right:2px solid #000;
}
#two {
background-color: orange;
float:left;
margin-right:30px;
height: 400px;
width:250px;
border-right:2px solid #000;
}
#media screen and (max-width: 400px) {
#one {
float: none;
margin-right:0;
bottom: 10%;
border:0;
}
#two {
float: none;
margin-right:0;
bottom: 10%;
border:0;
}
}
<div class="wrapper">
<div id="one">one</div>
<div id="two">two</div>
</div>
Use flexbox and you can easily do this without the need of media query:
.wrapper {
margin-top: 15%;
border: 2px solid #000;
display: flex;
justify-content: center; /*center the element*/
flex-wrap: wrap; /*make them above each other when they cannot fit in one row*/
}
.wrapper div {
min-height: 300px;
padding: 10px;
background-color: orange;
height: 400px;
width: 250px;
border: 2px solid #000;
}
<div class="wrapper">
<div id="one">one</div>
<div id="two">two</div>
</div>
You can also use inline-block instead of float:
.wrapper {
margin-top: 15%;
border: 2px solid #000;
overflow: hidden;
text-align:center;
}
.wrapper div {
min-height: 300px;
padding: 10px;
}
#one {
background-color: orange;
display: inline-block;
height: 400px;
width: 250px;
border-right: 2px solid #000;
}
#two {
background-color: orange;
display: inline-block;
height: 400px;
width: 250px;
border-right: 2px solid #000;
}
<div class="wrapper">
<div id="one">one</div><div id="two">two</div>
</div>
Is there a way on hover two divs to affect one div different ways?
The best be to know the solution in CSS way, but if there is no CSS way then I am open to JQuery or Javascript way.
For example when I hover over div myData1, then I affect separator to have some style. And when I hover over div myData2, then I affect separator to be in any other unique way.
.myData1{
width: 50px;
height: 50px;
background-color: #444;
}
.myData1:hover + #separator{
width: 50px;
heightL 100px;
background-color: #cba;
}
.myData2{
width: 50px;
height: 50px;
background-color: #888;
}
.myData2:hover + #separator{
width: 50px;
height: 100px;
background-color: #dba;
}
#separator{
width: 50px;
height: 100px;
background-color: #666;
}
<div>
<div class="myData1">
</div>
<div id="separator">
</div>
<div class="myData2">
</div>
</div>
Using jQuery, this would be a solution:
$('.myData1').mouseover(function() {
$('#separator').css('background-color', '#cba');
});
$('.myData1').mouseout(function() {
$('#separator').css('background-color', '#666');
});
$('.myData2').mouseover(function() {
$('#separator').css('background-color', '#dba');
});
$('.myData2').mouseout(function() {
$('#separator').css('background-color', '#666');
});
.myData1{
width: 50px;
height: 50px;
background-color: #444;
}
.myData2{
width: 50px;
height: 50px;
background-color: #888;
}
#separator{
width: 50px;
height: 100px;
background-color: #666;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<div class="myData1">
</div>
<div id="separator">
</div>
<div class="myData2">
</div>
</div>
Just with css:
.wrapper {
position: relative;
}
.myData1 {
width: 50px;
height: 50px;
background-color: #444;
}
#separator {
width: 50px;
height: 100px;
background-color: #666;
position: relative;
top: -50px;
}
.myData2 {
width: 50px;
height: 50px;
background-color: #888;
position: relative;
top: 100px;
}
.myData1:hover ~ #separator {
background-color: #cba;
}
.myData2:hover ~ #separator {
background-color: #cba;
}
<div class="wrapper">
<div class="myData1"></div>
<div class="myData2"></div>
<div id="separator"></div>
</div>
.data{
position : relative;
height:200px;
width:50px;
display:inline-block
}
.myData1{
width: 50px;
height: 50px;
background-color: #444;
display:inline-block;
position:absolute;
top:0px;
}
.myData1:hover + #separator2{
width: 50px;
height: 100px;
background-color: blue;
display:inline-block;
}
.myData2{
width: 50px;
height: 50px;
background-color: #888;
display:inline-block;
position:absolute;
bottom:0px;
}
.myData2:hover + #separator{
width: 50px;
height: 100px;
background-color: #dba;
}
#separator{
width: 50px;
height: 100px;
background-color: #666;
display:inline-block;
position:absolute;
top:50px;
}
#separator2{
width: 50px;
height: 100px;
background-color: #666;
display:none;
z-index:99999;
position:absolute;
top:50px;
}
<div class="data">
<div class="myData1">
</div>
<div id="separator2"></div>
<div class="myData2">
</div>
<div id="separator"></div>
</div>
Try this
I have a canvas on div a and a gif image on div b. What I want to do is to hide my canvas without using display: none; by putting the div b over div a.
I achieve it before by using display none to hide div a. But now I want div ato stay there while div b floats above it.
This is the current scenario: JSFiddle
try it with position absolute on div a. note that
margin: 0 auto;
will not work here. so use 'left' and 'margin-left' to fix that.
jsfiddle
I would wrap the two elements you want stacked in a container div and absolutely position div .b over div .a.
.a, .b {
width: 200px;
height: 30px;
text-align: center;
}
.wrap{
position: relative;
margin: 0 auto;
width: 200px;
height: 30px;
}
.a {
border: 1px solid red;
background: red;
}
.b {
border: 1px solid green;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: blue;
}
.container {
width: 300px;
height: 200px;
border: 1px solid #000;
}
.xtra {
width: 100%;
height: 150px;
background: #000;
}
<div class="container">
<div class="xtra"></div>
<div class="wrap">
<div class="a">div a</div>
<div class="b">div b</div>
</div>
</div>
UPDATED FIDDLE
You could position them both absolute and set z-index to .b.
.a, .b {
margin: 0 auto;
width: 200px;
height: 30px;
text-align: center;
}
.a {
border: 1px solid red;
position: absolute;
}
.b {
border: 1px solid green;
position: absolute;
z-index: 1;
}
.container {
width: 300px;
height: 200px;
border: 1px solid #000;
}
.xtra {
width: 100%;
height: 150px;
background: #000;
}
<div class="container">
<div class="xtra"></div>
<div class="a">div a</div>
<div class="b">div b</div>
</div>
How do I keep a resizable div from being overlapped by neighboring elements? I changed the z-index of the resizable div to have 1, and the rest 0.
This example will make it clear right away:
http://jsfiddle.net/gALUP/1/
HTML
<div id='grid'>
<div class='outline'>
<div class='container resizable'>
</div>
</div>
<div class='outline'>
<div class='container'>
</div>
</div>
</div>
CSS
.outline {
height: 200px;
width: 200px;
border: 1px solid black;
position: relative;
z-index: 0;
display: inline-block;
}
.container {
height: 100%;
width: 100%;
background-color: #ff0000;
}
.resizable {
background-color: #0000ff;
position: absolute;
z-index: 1;
}
Remove z-index: 0 from .outline:
.outline {
height: 200px;
width: 200px;
border: 1px solid black;
position: relative;
display: inline-block;
}
.container {
height: 100%;
width: 100%;
background-color: #ff0000;
}
.resizable {
background-color: #0000ff;
position: absolute;
z-index: 1;
}
http://jsfiddle.net/elclanrs/gALUP/2/