I am having the following div structure in a part of my site. There are two divs one below another. The first div is divided into two elements. One div (63%) and a button.
Below this, there is another div which is having same 63% as width and position as absolute.
Having the position as absolute not resulting in the two divs with the same width in the same size.
A part of CSS code
#two{
border: 1px solid;
width: 63%;
position: absolute; //Enabling this resulting in varying size even width is same
}
This is my code pen link, https://codepen.io/JGSpark/pen/bZyvEV?editors=1100
I would like to have two divs in the same size as the position absolute. Is there something I can try out here?
When you add position: absolute not relative to any element it is positioned relative to the root element.
A 63% textValue is 63% of #one element but 63% of #two is 63% of the document which includes the default body margin. So reset this to zero:
body {
margin: 0; /* added */
}
#template {
width: 30%;
}
#textValue {
border: 1px solid red;
width: 63%;
float: left;
}
#icon {
width: 5%;
}
#text {
width: 95%;
float: left;
}
#one {
width: 100%;
}
#two {
border: 1px solid;
width: 63%;
position: absolute;
}
<div id="one" class="row">
<div id="textValue"><span id="text">ONE Inner text</span><span id="icon"><i class="fa fa-angle-up"></i></span></div>
<button id="template" class="btn primary">Template</button>
</div>
<div id="two">TWO</div>
Or you can add a wrapper to the element which has position: relative - see demo below:
.wrapper {
position: relative; /* added */
}
#template {
width: 30%;
}
#textValue {
border: 1px solid red;
width: 63%;
float: left;
}
#icon {
width: 5%;
}
#text {
width: 95%;
float: left;
}
#one {
width: 100%;
}
#two {
border: 1px solid;
width: 63%;
position: absolute;
}
<div class="wrapper">
<div id="one" class="row">
<div id="textValue"><span id="text">ONE Inner text</span><span id="icon "><i class="fa fa-angle-up "></i></span></div>
<button id="template" class="btn primary ">Template</button>
</div>
<div id="two">TWO</div>
</div>
We able to add parent div with position:relative. Or Just add position:relative to body tag.
<div style="position: relative;">
<div id="one" class="row">
<div id="textValue"><span id="text">ONE Inner text</span><span id="icon"><i class="fa fa-angle-up"></i></span></div>
<button id="template" class="btn primary">Template</button>
</div>
<div id="two">TWO</div>
</div>
Position absolute need to be relative to something, in this case it is relative to the document which has default margin and padding. Try this:
<div class="wrapper">
<div id="one" class="row">
<div id="textValue"><span id="text">ONE Inner text</span><span id="icon"><i
class="fa fa-angle-up"></i></span></div>
<button id="template" class="btn primary">Template</button>
</div>
<div id="two">TWO</div>
</div>
in css add:
.wrapper {
position:relative;
}
In your case the #textValue that is inside #one is 63% that is 63% of #one div.
where as the #two div is given absolute without giving a parent element position relative so it is taking relative to body element that is comparatively bigger than the #one div so
you able to see the difference even though you have given a same width.
Related
We have two DIVs, one embedded in the other. If the outer DIV is not positioned absolute then the inner DIV, which is positioned absolute, does not obey the overflow hidden of the outer DIV.
#first {
width: 200px;
height: 200px;
background-color: green;
overflow: hidden;
}
#second {
width: 50px;
height: 50px;
background-color: red;
position: absolute;
left: 250px;
top: 250px;
}
<div id="first">
<div id="second"></div>
<div id="third"></div>
</div>
Is there any chance to make the inner DIV obey the overflow hidden of the outer DIV without setting the outer DIV to position absolute (cause that will muck up our complete layout)?
Also position relative for our inner DIV isn't an option as we need to "grow out" of a table TD.
#first {
width: 200px;
height: 200px;
background-color: green;
}
#second {
width: 50px;
height: 400px;
background-color: red;
position: relative;
left: 0px;
top: 0px;
}
<table id="first">
<tr>
<td>
<div id="second"></div>
</td>
</tr>
</table>
Are there any other options?
Make outer <div> to position: relative and inner <div> to position: absolute. It should work for you.
What about position: relative for the outer div? In the example that hides the inner one. It also won't move it in its layout since you don't specify a top or left.
An absolutely positioned element is actually positioned regarding a relative parent, or the nearest found relative parent. So the element with overflow: hidden should be between relative and absolute positioned elements:
<div class="relative-parent">
<div class="hiding-parent">
<div class="child"></div>
</div>
</div>
.relative-parent {
position:relative;
}
.hiding-parent {
overflow:hidden;
}
.child {
position:absolute;
}
Make sure.
parent position relative.
parent have manually assigned width and height(important as child element having absolute position).
child position absolute;
.outer{
position:relative;
width:200px;
height:100px;
overflow:hidden;
}
.inner{
position:absolute;
width:100px;
height:100px;
font-size:3rem;
}
<div class="outer">
<div class=inner>
Inner DIV to apply overflw hidden
</div>
</div>
}
You just make divs like this:
<div style="width:100px; height: 100px; border:1px solid; overflow:hidden; ">
<br/>
<div style="position:inherit; width: 200px; height:200px; background:yellow;">
<br/>
<div style="position:absolute; width: 500px; height:50px; background:Pink; z-index: 99;">
<br/>
</div>
</div>
</div>
I hope this code will help you :)
Here the second div is positioned absolute. first div is taking 60% of outer div width, but the second div is taking 60% width of the whole screen. I know that by giving position: relative for the first div will solve the problem.Is there a way to solve it other than by giving position: relative?
.outer {
height: 100px;
width: 100px;
}
.first {
background: black;
width: 60%;
color: white;
}
.second {
position: absolute;
width: inherit;
background: yellow;
color: black;
}
<div class="outer">
<div class="first">
parent
<div class="second">
child
</div>
</div>
</div>
If the outer div will have a defined width you can rely on CSS variable to define the percentage and inherit will work like expected:
.outer {
height: 100px;
--w:100px;
width: var(--w);
}
.first {
background: black;
width: calc(0.6 * var(--w));
color: white;
}
.second {
position: absolute;
width: inherit;
background: yellow;
color: black;
}
<div class="outer">
<div class="first">
parent
<div class="second">
child
</div>
</div>
</div>
If you don't know in advance the width of your parent, you can compute its width in javascript with a document.getElementById('parentID').getBoundingRect().width and use that value to resize your child element to 60% of this value.
But why would you not want to use position: relative on the parent ?
I want to show a div with list of data over a div(this div has google map).
So a list of Locations want to show in a div over google map div.
Html Code :
<div id="mapcan" style="width:100%;height:400px"></div>
<div class="air">
<h3>Example project</h3>
<ul class="nmap">
<li id="_d0" class="bus_station">
<div class="mlih">bus station</div>
</li>
</ul>
</div>
Style code:
.air {
background: #fff;
width: 300px;
padding: 20px;
position: absolute;
top: 1350px;
left: 12px;
}
I am giving fix margin from top 1350px but if i added more content on above google map div list div goes to top so it's not properly work.
i want to fix it on google map div if added more content above or below from this div. This list div will not affect.
Put your "legend" div inside your map and give your map a position: relative style.
That way, the absolute position of the child will be relative to its parent, meaning it will stay inside the parent div, even if you add content above/below the parent div.
#mapcan {
background: blue;
position: relative;
}
.air {
background: #fff;
width: 300px;
padding: 20px;
position: absolute;
top: 12px;
left: 12px;
}
.content {
height: 100px;
border: 1px solid black;
}
<div class="content">content above</div>
<div id="mapcan" style="width:100%;height:200px">
<div class="air">
<h3>Example project</h3>
<ul class="nmap">
<li id="_d0" class="bus_station">
<div class="mlih">bus station</div>
</li>
</ul>
</div>
</div>
<div class="content">content below</div>
I thing you want to like this:
Wrap both div with main div and add relative position of main div. Then try this code:
<div class="map-section">
<div id="mapcan" style="width:100%;height:400px"> map Div</div>
<div class="air">
<h3>Example project</h3>
<ul class="nmap">
<li id="_d0" class="bus_station">
<div class="mlih">bus station</div>
</li>
</ul>
</div>
</div>
css:
.air {
background: #fff;
width: 300px;
padding: 20px;
position: absolute;
top: 30px;
left: 12px;
}
.map-section{
position:relative;
}
#mapcan{
background:rgba(0,0,0,0.4);
}
Here is jsfiddle code : https://jsfiddle.net/aou5gmcv/
Add z-index: 0; to the bottom div and z-index: 1 to the top div
and add position: absolute; to both div's
I would like to be able to add an animation to this simple query for when the div is transitioned to its new position.
<div class="container">
<div class="left-side-bar">
<div class="long blue" id="1">
1
</div>
<div class="short red" id="2">
2
</div>
</div>
<div class='middle-side-bar'>
<div class='long green' id="3">
3
</div>
</div>
<div class='right-side-bar'>
<div class='short yellow' id="4">
4
</div>
</div>
</div>
the CSS
.left-side-bar{
clear: both;
width: 32%;
text-align: center;
float: left;
margin-top: 1%;
margin-bottom: 100px;
}
.middle-side-bar{
width: 32%;
text-align: center;
float: left;
margin: 1% 0 1% 1.6%;
}
.right-side-bar{
width: 32%;
text-align: center;
float: left;
margin: 1% 0 1% 1.6%;
}
.green {
background-color: green;
}
.long {
height: 300px;
}
.short {
height: 200px;
}
.red {
background-color: red;
}
.blue {
background-color: blue;
}
.yellow {
background-color: yellow;
}
Basically I want the div to be moved to its new place as an animated transition, rather than have it simply appear.
here is the jsfiddle
DEMO
Unfortunately, the replaceWith method does not work with animate in jQuery. Instead, you will probably need to find an alternative method to your solution. Here's one that slowly transitions the red box on top of the yellow box... http://jsfiddle.net/aeyg89rd/4/
I added the following jQuery, note that I used offset() to get the left and top properties of the yellow box, then I moved the red box to those left and top positions using animate() :
$(document).ready(function () {
var num4 = $("#4").offset();
$("#2").animate({ top: num4.top, left: num4.left }, 1000);
});
And I changed some CSS attributes for .red class so that I can move it around with the jQuery code above. More specifically, I changed its position to absolute, and gave it a width dimension:
.red {
position: absolute;
top: 320px;
background-color: red;
width: 150px;
}
Say I have 3 div elements that all have width:50% but have undefined heights. Now say these elements all have the attribute float:left.
Due to the width:50% attribute, the three elements are now in a two column layout, the first element sits left of the second, and the third sits below both the first.
Now, if the first div is 50px tall, and the second div is 200px tall, the third div sits below the line created by the taller div, and thus a big white space of 150px is created between div 1 and div 3.
How can one prevent the white space from occurring?
PS, the divs are being generated dynamically!
Here's a jsfiddle
make the Second element float right
See that Working Fiddle
HTML:
<div class="First"></div>
<div class="Second"></div>
<div class="Third"></div>
CSS:
div
{
float: left;
width: 50%;
}
.First
{
height: 50px;
background-color: red;
}
.Second
{
height: 90px;
background-color: yellow;
float: right;
}
.Third
{
height: 50px;
background-color: green;
}
Edit: If you have an unknown number of div's,
something like this HTML (alter the sizes as you want)
<div style="height: 50px;"></div>
<div style="height: 90px;"></div>
<div style="height: 70px;"></div>
<div style="height: 50px;"></div>
<div style="height: 90px;"></div>
<div style="height: 70px;"></div>
<div style="height: 50px;"></div>
<div style="height: 90px;"></div>
<div style="height: 70px;"></div>
Just use this CSS:
div
{
width: 48%;
margin: 1%;
background-color: #09F;
}
div:nth-child(odd)
{
float: left;
}
div:nth-child(even)
{
float: right;
}
Check out this Working Fiddle