I have a carrier element (aka parent) that contains another div as a child.
The parent has a padding.
I need to vertically position the child using absolute however I've noticed that this messes up the width of the child, which should be 100% (filling the entire width of the parent, obeying the margins).
Here is an example codepen link:
http://codepen.io/anon/pen/yKzwb
P.S. I'm looking for a solution that'll work in a dynamic way, instead of setting each possible child content's left or right values manually.
I'm pretty sure there was easy solution of this; would love to remember -
i'm not sure if it's the best solution, but the result expected is here :
http://codepen.io/anon/pen/wjgmh
changes made :
left: 64px;
right: 64px;
width: auto;
take also consideration of Sean Jermey answer by putting relative value of the parent.
Edit: To make only one "dynamic way" i propose this css selector :
#parent > .child {
//each generalize child behavior
}
If I understand your question correctly, you need to use a relative parent and change padding to margin:
position: relative;
margin: 64px; /* absolute is ignoring the padding attribrute */
example: http://jsfiddle.net/o73pb7j4/
But as you criticised with the other answers, a dynamic solution for multiple children will be hard to accomplish while using absolute positing as each child will absolute position from the top of the parent. If this isn't related to your question then please elaborate as I have misunderstood what you're looking for.
This link may be of more help:
http://blog.vjeux.com/2012/css/css-absolute-position-taking-into-account-padding.html
Related
I've got a Quasar layout, and a component that I need to fill 100% of the height of the q-page-container element. The problem is that the container does not fully expand to cover the entire height (unlike the drawer, which, using absolute positioning, does).
All CSS-tricks I've seen to tackle this problem interfere with the properties of the parent containers, which I'm reluctant to do to make sure I don't break any properties necessary for internal Quasar layout. Setting the child div of the container to height: 100% has no impact, setting it to an absolute value such as 100px does correctly set the height, but I need it to adapt to the browser viewport.
I've set up a fiddle to illustrate the problem here.
In this case I'd like #troublemaker to fill entire height of its container - or rather, its grandparent minus the header height, since the parent container simply expands to whatever content is inside.
PS: CSS layout and positioning have always seemed counter intuitive to me, so if anyone has some good advice on resources to learn how to better understand the logics of it I would appreciate it immensely!
If you have a div inside a q-page, I found the proper way to do this is to let the div inherit the min-height CSS property from the q-page component.
I updated the fiddle to show it: https://jsfiddle.net/u39qbrpj/4/
#troublemaker {
min-height: inherit;
background-color: green;
}
I think q-page-container need a q-page.
So just replace your div by a q-page and it's work.
here is your fiddle fixed: https://jsfiddle.net/uab1rnjh/2/
Or if you really want to work with a div.
You can do the trick with css: height: calc(100vh - 50px);
Here is your fiddle with a div: https://jsfiddle.net/yghL6so8/2/
In the documentation, you can see QPageContainer encapsulates a QPage.
at: https://quasar.dev/layout/page#QPageContainer-API
Using a q-page inside a q-page-container is certainly the most common way. Per the doc a q-page must be in a q-page container. However, if you want to put a div in a container and have it fill the container you can use class="fit" and the div will fill the entire container.
This is a hard one to describe, but the fiddle shows what I want to do:
https://jsfiddle.net/zbh8ewqg/
I want to align the #inner div so that the top of the bottom div aligns with the top of the #outer div.
Not to tricky using JavaScript, but can it be done in pure CSS?
(Note: in practice the number of elements will be dynamic, and the height not known because, for example, the font may change, thus solutions with hard-coded numbers don't help. I'm not trying to transfer the calculation from JavaScript to my brain.)
try to add this code. It will give same output as mention on jsfiddle.
div#inner{
position: absolute;
top: -75px;
}
Not really sure what are you trying to achieve, because I would recommend changing the mark-up div arrangements.
But anyway, here is a pure css alternative: https://jsfiddle.net/x8f2os39/
enter code here
If you add to your div's a fixed line-height then it can be very easy to calculate what value for topyou need.
If:
div {
line-height:20px;
}
Then you just need to add top:-80pxto your #inner div (4 divs above, 20px each)
Fiddle
http://codepen.io/anon/pen/Keisz/ <-- simple example
This codepen mimics an issue I'm having. I want the parent elements (outer and inner containers) to fully encompass their content (the content div) - I'm at my wit's end of how to accomplish this and I'm almost certain it's a simple fix.
Applying
box-sizing:border-box;
to the child element is not what I want. I want the parent to resize to child, not the other way around.
Any help you could provide would be most appreciated!
EDIT: I think there is some confusion. I want the parent to dynamically resize to contain the largest child width + padding. The max-height is also a requirement, sadly. :(
Remove the height and width attributes from the content div. Voila
http://codepen.io/anon/pen/pluAk/
Unless you apply box-sizing:border-box; the parent will not take into account the padding while wrapping around the child divs. You need to apply this style. Otherwise the code you've posted works just fine (it neglects the 20px padding on the innermost div and the parent wraps around the width of the child div minus the padding on thew child div).Just remove the max-height from the parent div and you are good to go
Not sure what is the ultimate purpose of why you are doing this, but assuming that it would help, this is an idea
#innerContainer {
display: block;
overflow: hidden;
}
FIDDLE
The Set-up for Context
I think you can tell by my resume on Stack Overflow that I am no stranger to css and its behaviors. However, I just came across something I have not experienced before that seems completely incorrect--yet Firefox 27 and Chrome 33 and IE 11 all render it the same.
Here is the code (just two empty nested div elements is the html), which can be seen in this fiddle example:
CSS
div {
width: 50%;
height: 100px;
margin: 10px;
border: 1px solid red;
position: relative;
}
div > div {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
border-color: cyan;
}
I would have expected the absolute positioned div to directly overlap the size of the relative parent div. I expected it would have had its positioning properties override the width and height and margin positioning from the straight div call. I would have expected this behavior (1) because it is more specific in its selector, and (2) because it is positioned absolute and given positioning calls to all four sides.
As you can see by the referenced fiddle above it in fact retains its width and height and seems to essentially "ignore" its positioning values all together. That is, I get the same positioning if the positioning values are taken out. I need to override the previously set properties like so...
width: auto;
height: auto;
margin: auto;
...to get the positioning to actually do something. This appears to be standard behavior given that all the main browsers are reacting the same. I suppose I have never noticed it before because normally my sizing of a wrapping div is done by a class and thus applies only to that div, while my positioning of the absolute child is done likewise, and I don't bother to set a width and height on it.
The Question Itself
My question is seeking quote(s) and link(s) from the W3C documentation (or a highly respected source, such as from one of the major browser developers) that discusses why or that the width or height settings should override a setting of top, right, bottom, left, etc. settings. From the main page discussing absolute positioning, all I found was that either can be used to set the width/height, but the crux of my issue is that I would expect the more specific/last in cascade to take precedence no matter which way was defining the sizing. Yet this is not happening here.
A Description of the Behavior I am Seeing
#pjp found this sitepoint reference, stating:
Absolutely positioned boxes with both right and left having a value
other than auto will effectively define the width of the element
assuming that the element's width is auto. This may result in the
element having no width at all if left and right positions occur at
the same point or perhaps overlap. If the values for left,right and
width are over-constrained and the direction property is ltr, right
will be ignored. If direction is rtl, left will be ignored. Note that
replaced elements with a width of auto will have the elements
intrinsic width substituted and the preceding rules applied.
This exactly articulates the behavior I am seeing. It does not address why (officially) it is that way. I would have expected instead that either:
(1) A higher specificity or equal specificity but following in cascade order setting of width and height (whether explicitly by those properties or by the positioning properites) to take precedence.
(2) In the case of defining both at once (an illogical thing to do, but...):
div {
position: absolute;
width: 50%;
left: 0;
right: 0;
}
or
div {
position: absolute;
left: 0;
right: 0;
width: 50%;
}
That the last defining of width would supersede, so the first the positioning would win, and the second the width would win. This would be just like two definitions in the same block, like so:
div {
width: 50%;
width: 75%;
}
Here, width: 75% wins because it is "last" defined for the property.
I think that your confusion comes from handling the specificity in an inteligent way.
It works on a mechanical way.
That is, every property that has a value is handled in a cascade way, without any consideration about what others properties are some how related.
The width property is inherited by the child as 50% because there is no width set on the child. forget about the posibility of calculating the width from the left and right properties, there is no width property defined, and that is it.
Then, you have also the left and right properties, both set to 0. (no discussion here, I think).
And then, in the w3c docs, you see
If the values are over-constrained, ignore the value for 'left' (in case the 'direction' property of the containing block is 'rtl') or 'right' (in case 'direction' is 'ltr') and solve for that value.
That is a cite with almost the exact words of the cite in your question, but coming from an authorative source
http://jsfiddle.net/eDYDD/
Seen above is a jsfiddle that mostly explains what I'm trying to do. I can't seem to get the #main_info to fill the 100% height of #main, so the border will fill 100% of the div and you know, look nice. Any help would be appreciated.
In CSS unless a parent has a fixed height, you cannot make a child fill 100% of it's height, without some trickery.
You can use display table to make the elements behave like a table, ensuring that the child fills out the parent.
You can make it so the border-right in your case is visually managed by the parent element, using a background image.
You can use JavaScript to maintain the appearance of the two elements.
Which one of these applies to you really depends on your use case. Since your avatar info is simply a border-right at this point, creating a visual border on #main_info is probably the easiest way to go.
Using a table based layout would also solve this nicely, but would require extra markup to ensure that you have a table element, a row element and a cell element.
Use absolute positioning.
#main {
position: relative;
}
#main_info {
height: 100%;
position: absolute;
}
http://jsfiddle.net/eDYDD/3/
Take a look at Equal Height Columns with Cross-Browser CSS:
Creating equal height columns with CSS is not as easy as it may first seem. This tutorial highlights the display problems that occur with multiple column layouts, and then shows a simple solution that works in all common web browsers. The method shown here is 100% CSS hack-free, image-free and JavaScript-free so it can even be used on the most strictly coded websites.
I modified your jsfiddle. The other answers miss out the easiest solution, which is to inherit your min-height property of the parent element:
#main_info {
width: 20%;
min-height: inherit;
border-right: 1px solid #E4E4E4;
}