Menu
Basically, how can I achieve this:
<div id="outerDiv">
<div class="ignoreWidth" style="width: 20px;">20px</div>
<div style="width: 4px;">4px</div>
<div style="width: 8px;">8px</div>
</div>
<!-- outerDiv.style.width == 8px -->
Without hard-coding the width for the outer div.
Edit:
The position: absolute worked for fixing the width problem, but then all the other elements are moved under it. Is there any way to avoid that without padding?
270
If you want to ignore a class in CSS, you can simply use the ! important keyword. This will override any other styling that has been applied to the element, including any inline styles. You can override an attribute defined in a CSS class by modifying its inline style.
An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed). However; if an absolute positioned element has no positioned ancestors, it uses the document body, and moves along with page scrolling.
static : every element has a static position by default, so the element will stick to the normal page flow. So if there is a left/right/top/bottom/z-index set then there will be no effect on that element. relative : an element's original position remains in the flow of the document, just like the static value.
make the css position attribute for outerDiv relative and the position for the class ignoreWidth absolute and set to 0, 0
this should position the first inner div in the top left of the outer div and use it's own height and width properties
in your css file for this page:
#outerDiv {
position:relative;
}
.ignoreWidth {
position:absolute;
top: 0;
left: 0;
}
You can take it out of the document flow with
.ignoreWidth{
position:absolute;
}
.
https://developer.mozilla.org/en-US/docs/Web/CSS/position
40
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
