How to align the Footer Into Three Separate columns?


#1

Hi,

I’ve been trying to make my blogger footer have 3 columns. I’ve spent two hours meddling with the html code with no luck.

A few years ago I did lots of html editing and now I don’t know how to change it back to default.

I’ve followed lots of tutorials but it just comes up with three widget boxes underneath each other rather than small boxes in a row. I need help removing my current settings but I’m not sure what to change.

[I think I’ve pasted my html code for the footer]

Thanks.


#2
</div> <!-- end content-wrapper -->

<div id='footer-wrapper'>
<div id='footer-column-container'>
<div id='footer-left'>
 </div>
<div id='footer-center'>
<b:section class='footer-column' id='col2' preferred='yes' style='float:left;'>
<b:widget id=' ' locked='false' title='' type=' '>
<b:includable id='main'>
<b:if cond='data:title != &quot;&quot;'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<b:if cond='data:link'>
<a expr:href='data:link'>
<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_img&quot;' expr:src='data:sourceUrl' expr:width='data:width'/>
</a>
<b:else/>
<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_img&quot;' expr:src='data:sourceUrl' expr:width='data:width'/>
</b:if>
<br/>
<b:if cond='data:caption'>
<span class='caption'><data:caption/></span>
</b:if>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>
</b:section>
</div>
<div id='footer-right'>
<b:section class='footer-column' id='col3' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
</div>
</div>

</div></div> <!-- end outer-wrapper -->

 </body>
</html>

#3

Please leave a link of your blog, So I can check it out and see the problem.


#4

@Victoria_Jane @HassanTahir is right please provide us your blog link, its help us to identify the exact issue.


#5

Hi,

Sorry, my blog is www. victorias-vintage. co.uk [added spaces as new user]

I have now managed to change the html as instructed here: www. bloggersentral .com/2009/10/how-to-install-three-column-blog-footer.html

But in the blogger ‘layout page’ it looks perfect and shows as having 3 columns but then when I put widgets in it and save, the widgets just go across the page horizontally rather than in individual boxes.

Can you help? Thanks


#6

Hi @Victoria_Jane, About a month ago I used the code published at MBT to create a three column Blogger footer widget.

Navigate to Blogger > Layout > Edit HTML. Place the following code just before ]]></b:skin>

/* -----   LOWER SECTION   ----- */ 
#lower { 
       margin:auto; 
       padding: 0px 0px 10px 0px; 
       width: 100%; 
       background:#333434; 
}  
#lower-wrapper { 
       margin:auto; 
       padding: 20px 0px 20px 0px; 
       width: 960px;
}
#lowerbar-wrapper { 
     border:1px solid #DEDEDE; 
       background:#fff; 
       float: left; 
       margin: 0px 5px auto; 
       padding-bottom: 20px; 
       width: 32%; 
       text-align: justify; 
       font-size:100%; 
       line-height: 1.6em; 
       word-wrap: break-word;  
       overflow: hidden; 
}
       .lowerbar {margin: 0; padding: 0;} 
       .lowerbar .widget {margin: 0; padding: 10px 20px 0px 20px;}
.lowerbar h2 { 
      margin: 0px 0px 10px 0px; 
       padding: 3px 0px 3px 0px; 
       text-align: left; 
       color:#0084ce; 
        text-transform:uppercase; 
      font: bold 14px Arial, Tahoma, Verdana; 
       border-bottom:3px solid #0084ce; 
}
.lowerbar ul { 
      margin: 0px 0px 0px 0px; 
      padding: 0px 0px 0px 0px; 
      list-style-type: none; 
}
.lowerbar li { 
      margin: 0px 0px 2px 0px; 
      padding: 0px 0px 1px 0px; 
      border-bottom: 1px dotted #ccc; 
}

And just above </body> paste the following piece of code.

<div id='lower'> 
<div id='lower-wrapper'> 
<div id='lowerbar-wrapper'> 
<b:section class='lowerbar' id='lowerbar1' preferred='yes'> 
</b:section> 
</div> 
<div id='lowerbar-wrapper'> 
<b:section class='lowerbar' id='lowerbar2' preferred='yes'> 
</b:section> 
</div> 
<div id='lowerbar-wrapper'> 
<b:section class='lowerbar' id='lowerbar3' preferred='yes'> 
</b:section> 
</div> 
<div style='clear: both;'/> 
</div> </div> 

Source: The above codes were taken from MBT. It worked for me and it will surely work for you as well. Let me know if you still face some issues.

~ Rohan Chaubey.


#7

Thank you. I did follow the MBT guide and again it looks okay in the layout stage but if you look at my blog the 3 widgets (labels cloud, pageviews + google plus) are all underneath eachother :frowning:

There must be something in my html somewhere preventing it!


#8

Oh I think I got you Victoria. You need to place them one below the other. Probably you might be able to see three sections in the layout showing up “Add a gadget”. Place a widget under the first one for it to appear on the left. Place the next widget after the middle “Add a gadget” and it will appear in the middle. Similarly place the third one below the third “Add a gadget” and it will appear at the right side.

Be sure to remove the previous codes you might have use. :slight_smile: Let us know if it worked.


#9

Thank you, but I have added the widgets under each ‘Add a gadget’, and although they are appearing in boxes side by side on the Layout page, once I press save and view the live blog, they are below eachother :frowning:

do you think maybe my footer is too wide?

is this relevant? >

/* Footer
----------------------------------------------- */
#footer {
  width:660px;
  clear:both;
  margin:0 auto;
  padding-top:15px;
line-height: 1.6em;
text-transform:capitalize;
letter-spacing:.1em;
text-align: center;
}

#11

Hi @Victoria_Jane Here is a simple fix for your alignment issue

Align The Footer Into Three separate columns

The reason why your widget sections are displaying one above another like three rows instead of three columns is because you have not added float properties for the columns. Just do this.

  1. Paste the following CSS code just above ]]></b:skin> inside your template

    #column1-wrapper, #column2-wrapper, #column3-wrapper { float: left; width: 33%; }

  2. Save your template, add your widgets and you are all done! :dizzy:

Result:


#12

Thank you so much! It’s working perfectly now! :smiley:


#13

You are most welcomed @Victoria_Jane :innocent:

This topic is now closed. New replies are no longer allowed.