Codepen: http://codepen.io/eguneys/pen/jPRexo
I have a parent with position:relative and two child with position:absolute side by side:
<div class='parent'>
<div class='child child1'>
</div>
<div class='child child2'>
</div>
</div>
.parent {
position: relative;
height: 200px;
border: 1px solid black;
}
.child {
position: absolute;
height: 90px;
width: 70px;
border: 1px solid red;
}
.child1 {
top: 0px;
left: 0px;
}
.child2 {
top: 0px;
left: 70px;
}
I want to put the children in a group:
<div class='parent'>
<div class='child-group'>
<div class='child child1'/>
<div class='child child2'/>
</div>
</div>
So that child-group wraps two children. (The child-group border is around two child).
This should work for wherever the children are absolutely positioned. They will be always side by side and child-group should wrap them.
Notes
In case this is not possible, what is a possible solution to have borders around the children?
I can set the width of the child-group with js so that I can calculate.
http://codepen.io/eguneys/pen/jPRexo
Don't position the child divs, position the child-group wrapper.
.parent {
position: relative;
height: 200px;
border: 1px solid black;
}
.child-group {
border: 2px solid green;
position: absolute;
top: 0;
left: 0;
}
.child {
float: left;
height: 90px;
width: 70px;
border: 1px solid red;
}
<div class='parent'>
<div class='child-group'>
<div class='child child1'>
</div>
<div class='child child2'>
</div>
</div>
</div>
Related
I need to add two div in top and bottom of fixed div,so I create fixed position panel in left, then add first div with h-100 class(height 100%). But Now, when I add second div in panel, I cant see this div in result.
.vertical-side {
width: 250px;
z-index: 1001;
background: #fbfaff;
bottom: 0;
margin-top: 0;
position: fixed;
top: 0;
border-right: 1px solid #e9e9ef;
}
.second {
width: 250px;
height: 100px;
border-top: 1px solid #e9e9ef;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="vertical-side">
<div class="first h-100">
First div
</div>
<div class="second">
second div
</div>
</div>
Demo HERE
I nee to this:
You can do this with flex utilities. Demo: here
.vertical-side {
width: 250px;
z-index: 1001;
background: #fbfaff;
bottom: 0;
margin-top: 0;
position: fixed;
top: 0;
border-right: 1px solid #e9e9ef;
}
.second {
width: 250px;
height: 100px;
border-top: 1px solid #e9e9ef;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="vertical-side d-flex flex-column">
<div class="first h-100 text-center">
First Div
</div>
<div class="second d-flex align-items-center justify-content-center">
Second Div
</div>
</div>
I think this is what your expecting, as per your description, you can adjust the height & width as per your need
.vertical-side {
width: 250px;
z-index: 1001;
background: #fbfaff;
bottom: 0;
margin-top: 0;
position: fixed;
top: 0;
border-right: 1px solid #e9e9ef;
}
.first {
width: 250px;
height: 100px;
background:blue;
border-top: 1px solid #e9e9ef;
}
.second {
width: 250px;
height: 100px;
background:Red;
border-top: 1px solid #e9e9ef;
}
<div class="vertical-side">
<div class="first">
First Div
</div>
<div class="second">
Second Div
</div>
</div>
Your 2nd div is under your first div, which is 100% of its parent height. that means the 2nd div is out of the viewport. use flex/grid for your parent div (vertical-side). you'll find the 2nd div. use a height for your first div. that will also solve the issue.
In HTML, You are basically building in layers - So your second div was butted up against your first div, whereas you wanted it at the bottom. By putting in a third one in between the two as you can see with my spacer div it essentially provides you with margin between your top and bottom divs that you can still use and work with later on.
CSS
.vertical-side {
width: 250px;
z-index: 1001;
background: #fbfaff;
bottom: 0;
margin-top: 0;
position: fixed;
top: 0;
border-right: 1px solid #e9e9ef;
}
.top {
width: 250px;
height: 100px;
border-bottom: 1px solid #e9e9ef;
}
.spacer {
height: 45%;
}
.bottom {
margin-top: 100%;
width: 250px;
height: 100px;
border-top: 1px solid #e9e9ef;
}
HTML
<div class="vertical-side">
<div class="top">
<h1>First div</h1>
</div>
<div class="spacer">
<h3>Spacer</h3>
</div>
<div class="bottom">
<h1>second div</h1>
</div>
</div>
Image of how it looks
Edit any specifics you need/want
you have in class .vertical-side : bottom: 0; and top: 0;
remove bottom: 0; perhaps this helps
alternatively you can use grid and change the height here: grid-template-rows: 1fr 60px;
or grid-template-rows: 1fr 1fr for automatic height.
.vertical-side {
display: grid;
grid-template-rows: 1fr 60px;
width: 250px;
height: 100vh;
}
.first {
display: grid;
align-items: center;
justify-content: center;
background: grey;
}
.second {
display: grid;
margin-top: 2px;
align-items: center;
justify-content: center;
background: green;
}
<div class="vertical-side">
<div class="first">
first
</div>
<div class="second">
second
</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>
I have parent element width:100px and position:relative. And I have its inner element with position:absolute. I need this inner element to stretch out up to 200px, but it doesn't work. Maximum value it takes is 100% of parent.
UPD
I don't want width to be fixed. I just needed it to be up to 200px if there is content and auto if not much content there.
p.s. I need those position properties
Here's html:
<div class='parent'>
<div>element</div>
<div class="inner">
<div class="item">text</div>
<div class="item">text</div>
<div class="item">text</div>
<div class="item">text</div>
<div class="item">text</div>
<div class="item">text</div>
<div class="item">text</div>
<div class="item">text</div>
<div class="item">text</div>
</div>
</div>
styling:
.parent {
width: 100px;
border: 1px solid yellow;
position: relative;
}
.inner {
max-width: 200px;
border: 1px solid red;
position: absolute;
}
.item {
float: left;
border: 1px dotted grey;
}
And jsfiddle to the example
Anyone please help
It is working fine. Your maximum width allowed is 200 pixels. See it here:
http://jsfiddle.net/jy6g2q7b/1/
Maybe you are searching only for width (is fixed)
.inner { width: 200px; }
See it working: http://jsfiddle.net/jy6g2q7b/4/
add "width: 200%" to the .inner and the max-width will still work.
.inner {
width: 200%;
max-width: 200px;
border: 1px solid red;
position: absolute;
}
http://jsfiddle.net/jy6g2q7b/2/
if you are using AngularJS, you can use ng-style = {'width':'200%'}. And if not, you can change it to inherit from parent `
.inner {
max-width: inherit;
border: 1px solid red;
position: absolute;
}
Cheers.
All that problem (odd behavior) is occurring due to this line -
.item {
float: left; /* THIS ONE */
border: 1px dotted grey;
}
you need to find some other alternative for those text blocks to align. You can use display: table-cell instead of float, but that makes the blocks go out of #content
I'll update my answer if I find any alternative.
Give position:static for the parent and then try
.parent {
border: 1px solid yellow;
position: static;
width: 100px;
}
.inner {
border: 1px solid red;
max-width: 200px;
position: absolute;
}
This is expected behaviour. The max-width value of .inner is not reached because it is limited by the width of .parent and the floated .items will only be on the same row until they hit the right edge of the containing element.
One way around this issue is to use a pseudo element to achieve a similar bordered result without the restrictive width:
Remove width from .parent, this will cause it to take up 100% of the width as it is a block level element. Remove border: 1px solid yellow; as it will no longer have the desired result
Create a new pseudo element .parent:before. Set border: 1px solid yellow; and width: 100px; to show the yellow border on this instead
Set .parent:before to be position: absolute; and have height: 100%; to position it relatively .parent and get it to fill the correct area
Now that .inner is not restricted by the width of .parent it should abide by the max-width: 200px; rule.
.parent {
position: relative;
}
.parent:before {
border: 1px solid yellow;
content: "";
display: block;
height: 100%;
position: absolute;
width: 100px;
}
.inner {
border: 1px solid red;
max-width: 200px;
position: absolute;
}
.item {
border: 1px dotted grey;
float: left;
}
<div class='parent'>
<div>element</div>
<div class="inner">
<div class="item">text</div>
<div class="item">text</div>
<div class="item">text</div>
<div class="item">text</div>
<div class="item">text</div>
<div class="item">text</div>
<div class="item">text</div>
<div class="item">text</div>
<div class="item">text</div>
</div>
</div>
body {
position: relative;
}
.test {
position: absolute;
top: 10px;
left: 10px;
height: 200px;
border: 1px solid #ccc;
overflow-y: auto;
overflow-x: hidden;
white-space: nowrap;
}
.wrap {
display: inline-block;
}
.item {
padding: 10px;
border-bottom: 1px solid #ccc;
}
.item:last-child {
border-bottom: none;
}
<div class="test">
<div class="wrap">
<div class="item">Some</div>
<div class="item">Larger amount</div>
<div class="item">of text</div>
<div class="item">should go in</div>
<div class="item">these items to prove</div>
<div class="item">that this thing is gonna grow to whatever</div>
<div class="item">to whatever</div>
<div class="item">it needs to</div>
</div>
</div>
The problem is that when the vertical scroll bar appears the absolutely positioned div doesn't grow accordingly and some content on the longest item is cut off. If I take 'overflow-x: hidden' off a horizontal scroll bar appears and that's not what I want either.
When 'white-space: nowrap' is removed everything looks good but I want each item to be one line. Is there any way to have the absolutely positioned div grow according to the width of a 'white-space: nowrap' element?
I think this is what you want
body {
position: relative;
}
.test {
position: absolute;
top: 10px;
left: 10px;
height: 200px;
border: 1px solid #ccc;
overflow-y: auto;
overflow-x: hidden;
white-space: nowrap;
}
.wrap {
display: inline-block;
}
.item {
padding: 10px;
border-bottom: 1px solid #ccc;
padding-right:28px;
}
.item:last-child {
border-bottom: none;
}
<div class="test">
<div class="wrap">
<div class="item">Some</div>
<div class="item">Larger amount</div>
<div class="item">of text</div>
<div class="item">should go in</div>
<div class="item">these items to prove</div>
<div class="item">that this thing is gonna grow to whatever</div>
<div class="item">to whatever</div>
<div class="item">it needs to</div>
</div>
</div>
I added padding-right:28px; to accommodate for the width of the existing padding and the width of the scrollbar.
I cant seem to be able to do this with relative and absolute positioning like I have with other things, but what I want to achieve is to have a div, with another div within it, however this inner div must appear outside the outer div on screen.
<div class="OuterDiv">
<span>Other things</span>
<div class="InnerDiv">
<span>Inner content</span>
</div>
</div>
EDIT : OK, so this I think is more complex than people are thinking. Using position relative and absolute I have already gotten other things on my page to work. What I have when I try this problem using positioning is
And then disappears completely when moved far enough outside of the outer div
More of my code,
<div class="Item Menu Active" style="display: inline-block;">
<div class="ItemList" style="left: -315.859375px;">
<div class="Item" style="display: inline-block;">
<span>N</span>
<div class="ItemList">
</div>
</div>
<div class="Item" style="display: inline-block;">
<span>O</span>
<div class="ItemList">
</div>
</div>
<div class="Item" style="display: inline-block;">
<span>P</span>
<div class="ItemList">
<div class="Item ClickItem">
<span>p1</span>
<div class="ItemList">
</div>
</div>
</div>
</div>
<div class="Item" style="display: inline-block;">
<span>Q</span>
<div class="ItemList">
</div>
</div>
</div>
</div>
.Item {
display: inline-block;
position: relative;
white-space: nowrap;
padding: 5px 10px 5px 10px;
cursor: pointer;
}
.ItemList {
display: none;
z-index: 1;
min-width: 75px;
position: absolute;
top: 100%;
left: 0px;
overflow-y: scroll;
overflow-x: hidden;
white-space: initial;
padding: 5px 5px 5px 5px;
background-color: white;
border: 1px solid black;
cursor: default;
}
EDIT 2 : Yes overflow:visible was my problem, issue is that overwrites the overflow-x and overflow-y that I am already using on the .ItemList for vertical scrolling on smaller screens. Any further suggestions?
You could position absolutely the inner div with the respect to the body as follows:
* { box-sizing: border-box; }
html {
height: 100% }
body {
position: relative;
padding: 10px;
min-height: 100%;
margin: 0;
border: 10px solid red; }
.OuterDiv {
width: 50%;
border: 10px solid green; }
.InnerDiv {
position: absolute;
width: 20%;
right: 10px;
border: 10px solid blue; }
<div class="OuterDiv">
<span>Other things</span>
<div class="InnerDiv">
<span>Inner content</span>
</div>
</div>
Note that in this case you must ensure that the body is high enough to contain the absolutely positioned inner div.
I feel like you shouldn't be structuring your HTML this way if this is the desired result: why not just have the inner div placed outside the parent's hierarchy? Either way, something like this should work:
<body>
<div id="outer">
<div id="inner">
</div>
</div>
</body>
And CSS
#body
{
position:relative;
}
#inner
{
position:absolute;
right:0;
top:30px;
}
You need to use position rule to set your elements to display within each-other.
#Outer {
position: relative;
width: 300px;
height: 180px;
border: 3px solid red;
}
#Inner {
position: absolute;
width: 50%;
height: 50%;
border: 3px solid blue;
margin: 5%;
}
<div id="Outer">
<div id="Inner"></div>
</div>
Try this out :
.OuterDiv{ position:relative; width:80px; height:80px; border:5px solid green }
.InnerDiv{ position:absolute; top:0; right:-100px; width:80px; height:80px; border:5px solid red }
<div class="OuterDiv">
<span>Other things</span>
<div class="InnerDiv">
<span>Inner content</span>
</div>
</div>
Edit:
It disappears because of overflow-x: hidden;
Previous:
http://jsfiddle.net/1k1rfrn3/
You should avoid hacking your DOM with CSS.
.OuterDiv{
border-style: solid;
border-width: 5px;
color: blue;
position:absolute;
overflow: visible;
}
.InnerDiv{
border-style: solid;
border-width: 5px;
color:red;
position:absolute;
left:500px;
}