That is a really nice question and here are the complete details
Stylesheet For Layout Page Elements
The Layout in Blogger is the place which lets you add, remove, edit gadgets on your blog. It lets you rearrange gadgets by just dragging it. Blogger adds a unique its to the
<body> tag of the layout page to organize the column height, width and its spacing. This CSS ID is identified as #layout and is inserted inside the body as shown below:
The layout is divided into 4 important sections
Content (where Blog Posts are displayed)
In order to customize the arrangement of gadget boxes and their margin and padding properties, you just need to add custom styles inside your template editor.
For example if you want to make changes to the alignment of widget boxes inside header, then you will add the following styles inside the
<b:skin> tag where all styles of blog are located.
Note: Suppose my header has ID #header and the left header section have id #header-left and right side #header-right
body#layout #header #header-left
body#layout #header #header-right
Note that in order to force re-write the styles it is important to use !important declaration at the end of each CSS property.
The above code will give the header a width of 90% and will align the header sections to left and right respectively as shown below:
Header left is given 30% width and header right is given 60%. The remaining 10% is covered by the gap between the two sections.
You will adopt the same approach to align Multi tabs in sidebar, columns in Footer and so on to keep a neat and clean layout structure.
You just need to pick the right ID’s(starting with # sign) or Class (starting with dot) of the section you want to align in layout. Use your browser inspect tool to pick the right classes or IDs. Remember that layout Styles will render only if they are referred as body#layout
That’s all required to create a clean setup layout design for your blogspot blog!