Absolute div height being cut off inside relative div
Just modify on your p.comm
selector like below:
p.comm {
display: block;
position: relative;
top: 10px;
padding-left: 60px;
}
Absolute div being cut off
Giving the swatch div a position: relative
, a height large enough to fit the control and tool tip, and offsets top: -45px
and margin-bottom: -45px
. Like so:
.swatch {
height: 80px;
background-color: transparent;
position: relative;
width: 250px;
overflow-x: scroll;
vertical-align: bottom;
padding-top: 45px;
top: -45px;
margin-bottom: -45px;
}
should fix it.
absolute position inside relative with no defined height
Adding whitespace around the child div is fairly trivial. However preventing the parent div from collapsing is more tricky and is the thing you need to tackle first. The problem you are having is that with the parent relatively positioned and the child absolutely positioned, the only element on the entire page that actually "knows" where the child is is the parent... and even then it's a fairly bad parent because it won't even make enough space for the child! The rest of the DOM will behave as if the element isn't even there - other non-positioned elements will float over or above it - even text will be obscured by your child div. Assuming you want to put other content in the parent div using absolute positioning in this way only means you're going to have to use absolute positioning all around the place... which can get a bit heavy on the brain debugging layout problems later on.
The only possible solutions I can think of offhand are:
Use javaascript to sniff out the height of the child div and apply that to the parent. A fairly simple job if you use a library like jQuery but that requires extra downloaded files and makes your site unnecessarily bulky if this is the only task you're using it for. THis also wouldn't solve the problem of the child div obscuring other elements on the page.
Rework your CSS (and it might take a lot of reworking depending on how far you've got and the complexity of the styling) to use
display:inline-block
on the child... this will stop the parent from collapsing but might give you additional layout issues.Rework your CSS (ditto) to
float:left
the child div. You would then need to use a CSS "clear hack" in order to prevent the parent divv from collapsing, although this is a tiny piece of CSS you can cut and paste from elsewhere... an easy job.
If you're determined to use absolute positioning like this my preferred solution would be to use jQuery (option 1) because most of my work tends to use a degree of it anyway... it's a tool I would have handy and the code to perform this task would be quite trivial.
EDIT - Here's a little fiddle to get you started. https://jsfiddle.net/fo8mq1vf/
How to prevent cutting off absolute positioned elements and still keep a box-shadow embrace the parent div?
It's very simple, in your specific case:
1- Remove overflow: auto;
from #wrap
2- Add this to your CSS
:
#wrap:after {
display: table;
content: "";
clear: both;
}
This makes the height of #wrap
's calculation include the floated element.
If you have multiple uses declare a class like clearfix
and use it whenever needed.
Demo: https://jsfiddle.net/85uqehz5/1/
how to fully wrap an absolute position div with a relative position div?
The simple answer is: no.
When you give an element position: absolute;
you take it out of the normal flow of content. If it is the only child of its parent, the parent will have no flow content. It will be empty.
Normally, empty html
elements have width
and height
values of 0
and, in turn, do not take space in the normal flow of content. There are exceptions that can cause an empty element to be rendered, such as being a child of a flex
parent that is stretching its children. But at some point along the chain of parents, one of them has to have a set dimension or at least some content (possibly in a sibling chain) that generates some height
/width
or otherwise they will all be just a big chain of empty elements not being rendered.
Additionally, padding
and border
attributes on a child are generating width
/ height
on parent elements, even when the child does not have content.
Related Topics
Position: Sticky Buttons Not Working in Ie 11
How to Remove the Space Between Inline/Inline-Block Elements
Why Don't Flex Items Shrink Past Content Size
How to Vertically Align Elements in a Div
How to Center Text (Horizontally and Vertically) Inside a Div Block
Make a Div Fill the Height of the Remaining Screen Space
Why Not Use Tables For Layout in Html
What to Do Regular Expression Pattern Doesn't Match Anywhere in String
What Does Enctype='Multipart/Form-Data' Mean
Targeting Flex Items on the Last or Specific Row
Does Id Have to Be Unique in the Whole Page
Vertically Align Text Next to an Image
Are (Non-Void) Self-Closing Tags Valid in Html5
How to Use a :Before or :After Pseudo-Element on an Input Field
Hide Scroll Bar, But While Still Being Able to Scroll
Position Absolute But Relative to Parent
Css When Inline-Block Elements Line-Break, Parent Wrapper Does Not Fit New Width
Html,Css - How to Horizontally Center Two Tables Side by Side