News

Build responsive CSS fixed page borders

Add an attractive flexbile border to a page with some simple CSS

StudioD

Add an attractive flexbile border to a page with some simple CSS

StudioD

inspiration: studiodyxe.com

Having a simple and easily defined style is essential for any website and Studio D YXE, or Studio D as they are known has managed to create this effortlessly.

The key to achieving this has been to completely reduce the colour palette to a simple scheme of a light grey background, while a red focus colour appears throughout the site for all of the buttons and menu elements. The red is then reintroduced for a stylised look to the photography.

The main text is a very dark grey, almost black colour and with this very reduced palette, all images fit together with the complete look that is stylish, elegant and easily recognisable.

TECHNIQUE

Body content

The Studio D site has a great border that fits around the edge of the site and this is always there, no matter what content is on the screen. To create this, firstly an empty div tag is required with the class of ‘wrapper’, this will contain the border.

001 <div class="wrapper"></div>

For testing only

In order to test that this works as it should, we need some page content that’s longer than the actual page. Here another div is added and this will be given a long height so that later on, the border can be seen working around the edge of the page.

001 <div class="long">A long piece of     content</div>                

Add the CSS

In the head section of the page, add an opening style tag so that the CSS can be applied to the elements. The first styling will be for the page itself. Setting the height to 100% and the background to a similar colour to Studio D helps get the look. Also a large padding around the edge is very useful.

001 <style>
002 html, body{
003 height: 100%;
004 heroText”>
005 background-color: #f0f0f0;
006 padding: 20px;
007 }

Style the wrapper

The wrapper class is going to contain the border, so it is set to be fixed on the page in the top-left corner. It’s given a z-index higher than other page content and then made to fit the width and height of the page. The box sizing is set to include the border, then a 5px border is added all round.

001 .wrapper{
002 position: fixed;
003 z-index: 999;             004 top: 0; left: 0;
005 width: 100%;
006 height: 100%;
007 box-sizing: border-box;
008 border: #ff0000 solid 5px;
009 }

Finishing off

The class of ‘long’ is only here for testing purposes and it’s given a height of 2,000 pixels which is larger than most monitors. Save this and test in the browser to see the red border always on the screen and fitting neatly into the browser window, even working responsively.

001 .long{ height: 2000px;}
002 </style>    
003
×