Enforce Widths on Empty Block Elements
One of the side effects within CSS that I find somewhat strange is that even if you give an element an explicit width, the element width is not respected if the element is empty or the elements within it are absolutely or fixed position. Of course the simple solution is adding to the given element, but something about that is undesirable: the height of that element will vary due to the font-size of said element. For one recent case, the side-effect changed the layout of the page. Eeek! For my case, I needed to keep the element width but with minimal effect on height. Luckily there's an easy solution!
The CSS
The solution amounts to using the min-height property:
.myElement {
min-height: 1px;
}
Setting a minimum height on the the element causes its width to be respected, and since 1px is the smallest height possible, that's the most unobtrusive solution!
What about min-height: 0.1pt?
You can use any value, but why is 0.1pt better?
i’d use
0.1pxdue to not visible allocation space.. i know1pxor any other also wont be visible with transparent background.. but, if you go to console, hovering that element will show you the allocated space with 1px and not with0.1px, so that’s why0.1pxwould be preferred.. but end result is no different with both.. so any value will be good as you said… i still not sure if any browser not supporting it.You could also do this with:
border-top: 1px solid transparent; or padding-top: 1px;
End-result is the same, but I thought I’d share :)
> the element width is not respected
Do you have a live demo to demonstrate that? As far as I can see the element width is respected, however the element does not show because its computed height is zero.
I thought this was a well known solution.
Also twitter bootstrap use this in 2.3.2 but have a giant 30px min height (1px in BS3).
Anyone know why its 30px, been going crazy trying to find why.
I have content
Thanks for the tip!
Easy and minimum
Why would you even want to do that? Seems like a bad markup/css decision…
Here is a test: http://codepen.io/KurtWM/pen/fyjFc
I wanted to try out MaxArt’s idea of using less than one pixel for the height. I found that using 0.1px did not have any effect. However; using 0.5px did.
In the test Pen, you can see the effect of setting the height of the DIV to 0.1px, 0.5px, or 1px. At 1px, the width is honored, but you also end up with the DIV being 1px in height. Setting the height to 0.1px does nothing, but setting it to 0.5px causes the width to be honored without making the DIV have any height. Go figure!
http://jsfiddle.net/PeterChaplin/qwxm7ftt/
width is “honoured”, but with 0 height there’s nothing to stop the next element along floating all the way across.
Awesome. thanks for this, was having an issue where dynamic content was leaving a column blank and causing thigns to shift. this did the trick.