Basic Template Structure (Blogger)

In this post I will show you the basic layout structure of a template. The elements in this diagram below do not necessarily refer to the actual names of the elements in your blog. This is just a basic structure of the layouts to show how one element holds another. A real template will actually contain much more elements then this diagram shows. This also does not reflect on the actual size of the elements in compare to others.


If we look at these as a bunch of boxes or containers we can see how each element is inside of another (Other then the body). This is to show how each element has a parent element or container holding it.

As a example to express how CSS coding would effect a element within another element I will show you a basic CSS code. This is of course if the elements in my template have these same names.

#content-wrapper {
background-color: orange;
color: blue;
}
#sidebar {
 background-color: green;
}

If the code above was in my template then the results would be as followed.

These areas will all have a background color of orange.

content-wrapper, main,  post-area, post-feeds, comments, and footer.

Since the content-wrapper holds all these other elements in it, these elements will have the same styles as the content-wrapper.

Even know the sidebar and gadgets are inside the content-wrapper, they have their own style which is green and was declared in the sidebar. The gadgets will follow the styles of the sidebar since it is the closest relative with a background style.

The sidebar and gadgets element will still have a font color of blue because they don't have any styles of font.

Its also important to remember size is a factor. If the width of containers are wider then the container holding them,  then they will not fit.  In other words you cant put two 10in square boxes into a 15in square box. So this will not work on your template either. If the width of the containers exceed the container they are in, then the results will either push one of the elements below the other, or will display one of the elements being as cut off.