Q: Right blocks float at the bottom I'm a complete newbie and working on the following page: http://mockingbirdagency.com/thebox/tvshow.html
The pull right container (holding the blocks on the right with float:right) float at the bottom and I had to give it this:
#pull-right-tv {
    float: right;
    margin-top: -1362px;
    width: 330px;
}

so it would start at the top of the page. Now each time, I modify something, the blocks move around and it's a pain in the ass. Any way around this ? What did I do wrong ?

A: Tweak your CSS a little:
#pull-right-tv {
    margin-top: -1362px;  /* Delete this */
}

#pull-left {
    float: left;          /* Add this */
    width: 600px;         /* Change this from 960 to 600
                             so it won't push the other column out of the way */
}

#content {
    overflow: auto;       /* Add this so the parent retains its height
                             when its children are floating */
}


A: What I would do is enclose the left column in a div as you have done with the right column and then put a float:left on the left column instead of float right in the right column. Floating stuff to the right has always been error-prone, for me atleast.
Also I would be very very careful with using negative margins like you have done now, as you say it's a pain in the @$$.

A: Several issues going on here..


*

*Line 165 - missing last "s" on class ""

*Set a width for pull-left.

*Change pull-right to 'float: left'. While you can float to the right here, I find it's better practivce to learn to float your elements in the same direction. This will come in VERY handy when you start developing responsive layouts (which you should start learning now!)

*Set the appropriate margin-left to your pull right container.


This fixes your problem:
.pull-left {
    float: left;
    width: 610px;
}

#pull-right-tv {
    float: left;
    margin-left: 20px;
    width: 330px;
}

Also, always try to use consistency in your naming convention. For example, these are your primary content containers so I would use something like #content & #sidebar so it will be easy to recognize down the road when you have to get back into the code.
One last mention about the use of ID or CLASS... an easy rule of thumb is to use ID for anything that will get used ONCE, such as the 2 selectors above. All other that get reference more than once in a page should use the CLASS selector. 
