comment 0

Tips To Fix CSS Layout Issue

Pulling your hair dealing with CSS layout issue?

Here are some tips to fix common issues with CSS layout

View Source

Fix css layout issue - Unclosed Tags
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

Fix css layout issue - Inspect Element
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!

Filed under: CSS, HTML

About the Author

Posted by

An Android purist, Syazwan translates our designers' work into functional HTML webpages. If you can sketch it, he can probably do it. Our designers are sticklers for pixel perfection and Syazwan delivers, every time. Holler to Syazwan if you are a Man U fan too.

Leave a Reply