Constructs

Mary Lou from Codrops shared a couple of subtle modern tab styles and effects. The collection contains some styles and effects for modern tabs; from a simple box to a SVG shape. Depending on your design, different tab layouts and looks can spice up your sections; think outside of the box (literally) and you’ll see how interesting the usually boring tabs can become. Inspired? Check out the demo page provided.

View More   View Demo

Pulling your hair dealing with CSS layout issue?

Here are some tips to fix common issues with CSS layout

View Source

Try to view source (CTRL+U on FF) on your browser. This is the best tools to check if all tags are properly close or if you have duplicate IDs on one same page. Most of the times, this is the culprit.

Inspect Elements

Another great tool. Try delete your suspected element that caused layout issue using inspect element. This way, you can focus to fix only that element.

Clearfix

Clear your floating container using clearfix. When you have floating elements, don’t forget to add clearfix for the container. View full explanation about floats and clearfix by Chris Coyier.

/* A clearfix is performed as follows: */
.clearfix:after {
   content: " "; /* Older browser do not support empty content */
   visibility: hidden;
   display: block;
   height: 0;
   clear: both;
}

/* Or, if you don't require IE<8 support, the following is fine too: */
.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

/* HTML with clearfix */
<div style="float: left;" class="clearfix">Sidebar</div>
<!-- No Clearing div! -->

Do you have other tips on fixing CSS layout issue? Comments are welcome!