Aligning & Positioning Gadgets (Blogger)

Sometimes people wonder how to align or position a gadget to fit your certain needs. Well its really quite simple to do.


You need to Locate The Widget/GadgetID# 
Now go to Design-->Template Designer-->Advanced--> Add CSS--> Input one of the codes below


This is for basic text alignment. Replace the Blue with center, left, or right
#GadgteID# {
text-align: center;
}


This is for a more precise alignment.You can use Padding & Margin
#GadgetID# {
padding: 0px 0px 0px 0px
}


You can also use a code like this to fit your needs.
#GadgetID# {
position:absolute;
left:100px;
top:150px;
}


This would display your gadget  100px off the left side of your browser screen and 150px off the top. You can adjust this to your liking.


Their are a few different types of positioning variables you can use.


absolute:  Generates an absolutely positioned element, positioned relative to the first parent element that has a position other than static. The element's position is specified with the "left", "top", "right", and "bottom" properties


fixed:  Generates an absolutely positioned element, positioned relative to the browser window. The element's position is specified with the "left", "top", "right", and "bottom" properties




relative:   Generates a relatively positioned element, positioned relative to its normal position, so "left:20" adds 20 pixels to the element's LEFT position


static:   Default. No position, the element occurs in the normal flow (ignores any top, bottom, left, right, or z-index declarations)


inherit:    Specifies that the value of the position property should be inherited from the parent element