Title and a box

I wanted to post this nice trick several weeks ago but timing was not right. So now there is a chance to explain how to make this nice effect that is shown on the picture below.

First of all, let me explain what you see. A div ID tag which has a 2px border of green colour and an h1 tag which is positioned over the border of a div ID.

How to make this effect work?

1. Make a div tag and define border and its colour

2. Make an h1 tag and define background (in our case white), no border or a border in the colour of the background and apply relative positioning (for example top -50px). Another way you could accomplish that is by absolute positioning but then design is not fluid any more. The same way as vertical position is defined horizontal can be also – it more or less depends on previewing of the entered number in the browser.