# Wishful Coding

Didn't you ever wish your
computer understood you?

## CSS tips and tricks

While working on Sombrero, I encountered a lot of things I did not know how to do properly. I hope they help someone.

## width: cling;

Block elements normally fill up all the available width, except when you apply position or float to them. I needed some element to take up the minimal width, without the side effects of floating or positioning. display: table; is the solution I was looking for.

## Full-width form fields

Another problem in my magic alignment layout where full-width form fields. Input elements do not take space like normal block elements, no matter the display property.

width: 100%; works, but only as long as you have absolutely no borders, margin, or padding. To get around that, CSS 3 has a property to use the IE 5 box model, which includes padding and borders in the width: box-sizing: border-box;

## Collapsing margins

I can’t imagine why I never noticed before, but it turns out CSS collapses margins on “regular” block elements. It’s complicated.

## display: run-in;

I never used it, but it seems like an interesting property. It makes things like headings appear inline with the content of the block below it.

## Styling range input fields

Some modern browsers support input fields of type="range", for imprecise number values. However, style on these elements is normally completely ignored.

Bring in -webkit-appearance: none;, which turns the slider track back into a normal box. Then apply the knob styling to the ::-webkit-slider-thumb pseudo element.

## position all four corners

Another part in my alignment puzzle. Note that not all browsers support this. If you can’t do with 2 sides plus size, it is possible to specify all 4 and leave the sizing implicit.