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

For more on the use of this code you may refer to this link below.
Custom Styles to Gadgets