Centering a div block without the width using pure CSS (All Browser)

Easiest way to centering a div using pure CSS

The trick to center the div is to shift the outer and inner div, with the use of position:relative and display:block. Shift the outer block 50% left relative, and then next is to move the inner block back to -50% left. Hope this make sense. This code will work on all browser.

Continue Reading »

500+ CSS/HTML Grid Layouts (Grid System)

“You need options. Anyone that’s spent time collaborating on web design projects knows that every developer has their own processes — even with best practices being observed there is variation in techniques. So your CSS library should give you more than one way to attack a problem.

Website layouts can be a serious pain, but CSS gives you a great deal of flexibility in how you approach the layout issue. Often the home page needs a grid design while post pages have a three column layout, with other formats for custom pages. With CSS layouts already in place, you can quickly implement a layout and change as needed.

The following is a collection of layout libraries you can add to your own with multi-​​column static and liquid layouts. Enjoy and let us know which ones you like best!”

Continue Reading »

The beginning of web3.0 – Web Design New Approach – Scrolling Page Animation

With the flexibility of CSS3 / html5 / JavaScript, we see new approach to web design. With more power css3 / html5 / javascript, designer and developer can now do things in a more fancy way (design fashion). While scrolling the page down, you can see the interaction that the designer or brand that showcase there product in a way few years ago only Flash can handle. But now with the power of CSS3 and HTML5, we can put in details into the whole structure and flow of the web in a simple way. Now you are viewing not just an website, you are now viewing a webshow! Now, let’s the show begin.


Continue Reading »

How to make a proper CSS button


This post will teach you how to make a proper CSS button.

<a class="button btn_file btn_blue">
     <span>
          <span>Button Text</span>
     </span>
</a>

From the above code you can see that I had entered 3 classes for the < a > tag, they are button, btn_file and btn_blue. This is how I usually construct the class layer.
Continue Reading »

The New Era Of Fluid Web Layout With SmartColumn And SpaceMaker

In the last couple of months, I had implement the latest layout on SmartColumn and SpaceMaker to several joomla/wordpress site. The client loved it and amaze with the auto size changing and layout with this 2 javascript code. This fluid smart column layout are used more often in today web layout. I hope in the future we can create something that link to the joomla or wordpress. So majority user can benefit from this exciting layout.

Showcasing site that are using this kind of layout.

Continue Reading »