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!
![Regular Expressions for the Rest of Us]()
Sooner or later you'll run across a regular expression. With their cryptic syntax, confusing documentation and massive learning curve, most developers settle for copying and pasting them from StackOverflow and hoping they work. But what if you could decode regular expressions and harness their power? In...
![Send Text Messages with PHP]()
Kids these days, I tell ya. All they care about is the technology. The video games. The bottled water. Oh, and the texting, always the texting. Back in my day, all we had was...OK, I had all of these things too. But I still don't get...
![Using Opacity to Show Focus with jQuery]()
A few days back I debuted a sweet article that made use of MooTools JavaScript and opacity to show focus on a specified element. Here's how to accomplish that feat using jQuery.
The jQuery JavaScript
There you have it. Opacity is a very simple but effective...
![Display Images as Grayscale with CSS Filters]()
CSS filters aren't yet widely supported but they are indeed impressive and a modern need for web imagery. CSS filters allow you to modify the display of images in a variety of ways, one of those ways being displaying images as grayscale.
Doing so requires the...
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.