CSS: make divs auto adjust automatically to different heights on the container div

Basically you put a clear:both at the bottom of the floated elements, to pull the height of the container div down:

<html>
<head>
<style type=”text/css” media=”screen”>
#container {
background-color:#CCCC99;
width:50%;
}
</style>
</head>
<body>
<div id=”container”>
<div id=”left” style=”float:left;background-color:#CCCCCC; width: 40px;”>Too much content it goes off the background of the container div, how do I fix this? Too much content it goes off the background of the container div, how do I fix this?Too much content it goes off the background of the container div, how do I fix this?Too much content it goes off the background of the container div, how do I fix this?Too much content it goes off the background of the container div, how do I fix this?Too much content it goes off the background of the container div, how do I fix this?Too much content it goes off the background of the container div, how do I fix this?Too much content it goes off the background of the container div, how do I fix this?Too much content it goes off the background of the container div, how do I fix this?</div>
<div id=”right” style=”float:right;background-color:#DDDDDD;”>THis is right floated div</div>
<div style=”clear:both”>This will make the size of container ok, no matter what is the content size of the floating divs</div>
</div>
</body>
</html>

<html>

<head>

<style type=”text/css” media=”screen”>

#container {

background-color:#CCCC99;

width:50%;

}

</style>

</head>

<body>

<div id=”container”>

<div id=”left” style=”float:left;background-color:#CCCCCC; width: 40px;”>Too much content it goes off the background of the container div, how do I fix this? Too much content it goes off the background of the container div, how do I fix this?Too much content it goes off the background of the container div, how do I fix this?Too much content it goes off the background of the container div, how do I fix this?Too much content it goes off the background of the container div, how do I fix this?Too much content it goes off the background of the container div, how do I fix this?Too much content it goes off the background of the container div, how do I fix this?Too much content it goes off the background of the container div, how do I fix this?Too much content it goes off the background of the container div, how do I fix this?</div>

<div id=”right” style=”float:right;background-color:#DDDDDD;”>THis is right floated div</div>

<div style=”clear:both”>This will make the size of container ok, no matter what is the content size of the floating divs</div>

</div>

</body>

</html>

keyword: auto-height

CSS Sprites

How to generate them.

The easiest way is to use SpriteMe generator:

http://spriteme.org/

Add it to your browser as a bookmarklet, when you are in the website you want a sprite for click on the bookmark, and click on the “sprite images” button to autogenerate it.

You can also get the CSS for it on the same UI. Easy.

If you have to build it manually, best practices dictate:

1) Construct a matrix, with predefined square sizes of, for example 5×5, 10×10, 16×16, or whatever your images fit.

2) Drop your icons or images in the squares, since all the squares are the same sizes, you don’t have to calculate the CSS, you can just multiply the row and column number, and there your have your CSS setting

Javascript: Closures / object / function in javascript

Functions are first-class objects, i.e. they are objects and can be manipulated and passed around like just like any other object. Specifically, they are Function objects.

A closure is an expression (typically an inner function) that can have free variables together with an environment that binds those variables (that “closes” the expression).

Inner functions have access to the variables of their enclosing outer function, but after running the outer function, you can’t have access to modify their inner scope, just to use it.

Be careful with closures: they could occupy memory without the possibility of being clear out until next page reload.