Div's within Div's, Why?

I wondered that for a while too, and I found out the hard way. First I’ll tell you how to do it, because it actually is helpful, but also saves you from a huge error. Lets say you have 2 divs, and you want them all grouped together, wrap a <div>, around those <div>’s.

Perhaps you would like to have these divisions beside each other. Because you want these two groups to be together, it’s only logical to put them both in a <div>. I usually give it the id of "wrapper1", or "container1", something like that, because it’s wrapped around more than one <div> at a time. Be sure to give any wrappers some or all of the following declarations, or variations thereof:

It’s important to dictate the area of you “wrapper”, this way it will prevent your content from being shifted around when you resize your window.

Proper Positioning

When positioning items, be sure to use your float:left; to bring the next item up, and then margins or padding to adjust how far way you need that object. I did it the hard way at first, not using float, but purely margins and padding. In other words, I would use a margin that would push the bottom item over, and then a negative margin to make it go upwards, getting the look of a float:left;. This causes a colossal amount of errors, so do not do it that way.

Also, you may find that margins that move an object to the right, seem to be pushed over too far in internet explorer. To prevent this, add display:inline; to the object that has the pushing margin.