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!
![9 Mind-Blowing Canvas Demos]()
The <canvas> element has been a revelation for the visual experts among our ranks. Canvas provides the means for incredible and efficient animations with the added bonus of no Flash; these developers can flash their awesome JavaScript skills instead. Here are nine unbelievable canvas demos that...
![5 Ways that CSS and JavaScript Interact That You May Not Know About]()
CSS and JavaScript: the lines seemingly get blurred by each browser release. They have always done a very different job but in the end they are both front-end technologies so they need do need to work closely. We have our .js files and our .css, but...
![MooTools Zebra Tables Plugin]()
Tabular data can oftentimes be boring, but it doesn't need to look that way! With a small MooTools class, I can make tabular data extremely easy to read by implementing "zebra" tables -- tables with alternating row background colors.
The CSS
The above CSS is extremely basic.
![Add Site Screenshots for External Links Using MooTools Tooltips]()
Before you send your user to an unknown external website, why not provide them a screenshot of the site via a tooltip so they may preview the upcoming page? Here's how you can do just that using MooTools.
The MooTools JavaScript
The first step is to grab...
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.