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!
![CSS @supports]()
Feature detection via JavaScript is a client side best practice and for all the right reasons, but unfortunately that same functionality hasn't been available within CSS. What we end up doing is repeating the same properties multiple times with each browser prefix. Yuck. Another thing we...
![Detect DOM Node Insertions with JavaScript and CSS Animations]()
I work with an awesome cast of developers at Mozilla, and one of them in Daniel Buchner. Daniel's shared with me an awesome strategy for detecting when nodes have been injected into a parent node without using the deprecated DOM Events API.
![jQuery Wookmark]()
The first thing that hits you when you visit Pinterest is "Whoa, the columns are the same width and the photos are cut to fit just the way they should." Basic web users probably think nothing of it but as a developer, I can appreciate the...
![Create Your Own Dijit CSS Theme with LESS CSS]()
The Dojo Toolkit seems to just get better and better. One of the new additions in Dojo 1.6 was the use of LESS CSS to create Dijit themes. The move to using LESS is a brilliant one because it makes creating your own Dijit theme...
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.