How to add footer for your website ? >> Basic CSS for 3 Column footer
Rishi Kashyap
8.72 K
X

Basic CSS for 3 Column footer


0

CSS will help our 3 Column footer take it shape as planned, with three sections in 3 columns. We have defined 2 class viz : "footer_div" and "clear". A very basic CSS for 3 column footer can be obtained by using the following CSS in the <head> section of each webpage showing the footer.
<style type="text/css">
.footer_div
 {
 float: left;
 margin: 10px;
 padding: 10px;
 width:150px;
 }
.clear
 {clear:both;}
</style>
BY using CSS we are floating each footer_div to left making it to stack next to each other. You can modify the margin and padding as per your website. The extra div with "clear" class will result an empty div which will ensure that any content below it always remain below the floated footer_div.

While I do understand that this is a very basic CSS, but you can modify it as per your website. In my case the "MOST VIEWED" div size could not fit the long post so I modified only the size of that div. I even added the copyright and browser recommendation in the "clear" div. While I thought to add my CSS for 3 column footer here itself but I know that I will be changing it often, so am not showing. Anyways jahajee.com complete CSS can always be found by looking at the source of this page.Basic CSS for 3 Column footer

Rishi Kashyap | | EDIT

SHARE Whatsapp Facebook Twitter To TOP