Here are the main CSS tricks to tackle the typical problems faced by web designers when they lay out with CSS. There may be discrepancies between readers, but said that these are techniques that I personally have worked, after many trials and attempts to learn it ...  

Use a global container for all boxes (when things are fired)

    Thus these globally prefixing the order of all other boxes. In reference to this container orders the rest of the interiors. It's like doing a fence or fence so that nothing is escaping. Obviously we are talking about sites? Fixed? not elastic.     Sometimes it is best to use a container to the body site, then let your foot out.

        Example for a centered 900px container:   # container {         margin-top: 0px;         margin-right: auto;         margin-bottom: 0px;         margin-left: auto;         width: 900px;         }

That float to the left (when boxes overlap)

  This is a great way to avoid incompatibilities between browsers. The use of CSS hacks was in large part because they worked? Focus? boxes. If such precise put three boxes in a container 300px 900px can do the following.

        Example:   # box {         float: left;         width: 300px;         }

Calculate well the padding or fillers (when the boxes go down)

    Almost all headaches and curses hechadas on CSS are due to misuse or misinterpretation of the padding is done. But it is simpler than it seems.     Why it's paddings or fillings? Well, what it does is generate? Filler? a certain extent such as to give a margin to the elements, but it does on the width in pixels that is fixed. For example, if we have a box of 300px and apply a padding of 10px on the left, now we have a box of 310px. This will overwhelm the rest of the boxes and move down. That's when the novice designer goes crazy. The issue is that if there is a difference of up to 1px these overflows occur, but when you look at your box you include edges will result difrencias.     What we do is simple, take calculated and remember each setting is made ​​of fillings. Now we have to make a box with padding of 10px 290px to the left.

        Example:       # box {         float: left;         width: 290px;         padding-left: 10px;         background-color: # FFE6DD;         }

Footer with fixed width (when the mad footnotes):

    To better understand how the use of boxes in CSS you can think of a group of objects of different shapes that are struggling to adapt and occupy the space that has been fixed. It often happens that the footnotes are the most problems when bringing a site model. Or going up, is aligned to the left, or overflows, etc.. We solved this issue by prefixing many fixed values ​​to the heights of boxes, but no sense. What you should do is once again set a value of fixed width. In this way the foot is going to his place of rest and will go where it needs to go.

        Example:     # foot {         width: 900px;         background-color: # 666666;         }

    Not everything is 1 +1 = 2 in CSS (when the widths do not close)     A common problem in css to think that all widths between boxes close perfectly. It is sometimes necessary to play the values ​​of the containers, sometimes opposite to the logic must be added some px to containers.

Other quick tricks

    Simple tricks, of which there is no need to explain a lot but are very practical and will make it easier to work and avoid errors.

    - Use different colors to distinguish the boxes     - Put a descriptive word in each box     - says the source code and indicates the end of the large containers     - no spaces between divs mezquines     - Do not be a fundamentalist and do not want to write your CSS with two or three lines. If you do not want to write the necessary errors.     - Beware of the size of the images embedded, they change the width of the container.     - How to choose the names of each div and tries to be ordained in the code.     - If you work with several boxes, try to group them in groups, this is very important. For example, a container to group three or four boxes.

Conclusion

All these paragraphs are just some suggestions or comments that I has worked for me. Many other? Bonds? of this type, if you have any feel free to comment on this article.

What happens when you can not solve a problem with CSS or similar? I really wake up has worked for a while, do something else and then come back and try again.

Stop denying and not go crazy with CSS depend on the amount of time, work and effort that your work goals. Do not hesitate.