Category Archives: CSS

(CSS) How to center a div without width

I needed to center a div with dynamic content, so I couldn’t set a fixed width.
Since margin: 0 auto; really won’t do anything if the element doesn’t have a fixed width you can solve it like this:

HTML

<div id="container">
   <div class="centered">My dynamic content, that will be centerd</div>
</div>

CSS

.centered {
   margin: 0 auto;
   display: table;
}

CSS3 box shadow

A nice feauture in CSS3 is the box-shadow. Instead of working with tedious PNG-images you can add shadows to any element with the CSS property box-shadow.

The syntax works like this:

box-shadow: <offset-x> <offset-y> <blur> <spread> <color> <inset>

  • The offset settings will set the angle of the shadow. Where it will be cast in relation to the element.
  • Blur with set how much the shadows blurs out from its defined position.
  • Spread will set the size of the shadow. By default the same size as the element. This number can be negative to set a smaller shadow.
  • Color can be any  format. i.e. black, yellow, #FFF, rgb(255, 240, 240) or rgba(0, 0, 0, 0.7)
  • Using the inset option will cast the shadow inside the element instead of outside.

Here are some examples:

Continue reading →