Nested DIVs

Fancy borders with nested divs

According to the box model, each box can have a defined border which may vary in color, width, and style. Using appropriate values, content can be 'framed', such as here with a 10px, solid, light gray (#eee) border.
The same effect can be achieved by the use of two nested divs. In this case, our outer div has the light grey colour applied as its background-color, whilst the inner div has a 10px margin. To avoid margin collapsing, a transparent border is added to the outer div. Of course, whilst we've perfectly replicated the single-div style, this would all be redundant, unless ...
... we start getting a bit more fancy. The use of 2 divs allows borders to be applied independently of our main thick 'frame', and we get a slightly more polished frame. This still isn't anything too special, but really comes into its own when ...
... we start experimenting with background images. In this instance, the outer div has a background-image and all borders (excepting the transparent 'margin breaker') have been removed. The image has a fairly commonly used gradient fade effect, but your frames are now only limited by your imagination.

Comments

Leave a comment