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!
![Facebook Open Graph META Tags]()
It's no secret that Facebook has become a major traffic driver for all types of websites. Nowadays even large corporations steer consumers toward their Facebook pages instead of the corporate websites directly. And of course there are Facebook "Like" and "Recommend" widgets on every website. One...
![Create a CSS Cube]()
CSS cubes really showcase what CSS has become over the years, evolving from simple color and dimension directives to a language capable of creating deep, creative visuals. Add animation and you've got something really neat. Unfortunately each CSS cube tutorial I've read is a bit...
![Drag and Drop MooTools File Uploads]()
Honesty hour confession: file uploading within the web browser sucks. It just does. Like the ugly SELECT element, the file input is almost unstylable and looks different on different platforms. Add to those criticism the fact that we're all used to drag and drop operations...
![Chris Coyier’s Favorite CodePen Demos II]()
Hey everyone! Before we get started, I just want to say it's damn hard to pick this few favorites on CodePen. Not because, as a co-founder of CodePen, I feel like a dad picking which kid he likes best (RUDE). But because there is just so...
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.