CSS Content Layout Tricks For Front End Developers

• September 17, 2015
• Leave a comment

Front end development, also known as client side development is the practice of producing HTML, CSS and JavaScript for a website or web application, so that a user can see and customize them directly. (source)

In this article, we will discuss some CSS tricks that will help front end developers to resolve CSS layout problems and sometimes this can be done without even changing the HTML of the content/website.

Full Width/Box Width Layout Problems:

Full width layout is displayed on full area of screen horizontally. It does not matter what the screen size is and displays the content centered in an accurate way.

Box width layout size is not matched with screen size but it is of a fixed size which is equal to the content area of the site.

Most of the design comes with the mixture of both layout i.e. Full width and Boxed width. For instance see the picture below, some sections are designed as boxed layout and some section are designed as full width layout:

The problems arises when your site width is fixed i.e. 1140px/1200px or whatever as per your design requirements. Now if you want one/more section to be full width layout, you either have to change your HTML structure or editing the CSS of the whole page for one section. We are here to help you in this regard. You surely don’t have to change your HTML structure or you don’t have to edit or add lots of CSS, you only have to add CSS or full width section layout. See the screen shot below for better understanding of what we are going to achieve:

As per above screenshot, the settings are as follows:

• Site width: 1200px
• No. Of boxes: 3 – Box One, Box Two, Box Three
• Boxes width: 100% i.e. 1200px

We want ‘Box Two’ to be 100% of screen, not 1200px but keeping the content area of ‘Box Three’ 1200px and centered as of other two boxes on the site. Box one, two & three CSS is as follows:

Now add few more CSS for Box Three to make 100% of the screen but keeping the content centered as of the other two boxes:

Overflow hidden is necessary to avoid horizontal scrolling on the site.

The coherent addition of padding left and right and margin (negative value) left and right will make the Box size as per screen size. This trick also works on 1920px screens.