CSS: Crop and resize image to certain ratio

Edit margin and move the image around within the <div> container.

<style>
.crop {
    width: 200px;
    height: 150px;
    overflow: hidden;
}

.crop img {
    max-width: 400px;
    height: auto;
    margin: -75px 0 0 -100px;
}
</style>

<div class="crop">
    <img src="http://img1.jurko.net/wall/paper/donald_duck_4.jpg" />
</div>

Demo 

Refer:
http://stackoverflow.com/questions/493296/css-display-an-image-resized-and-cropped
http://dabblet.com/gist/4711695

CSS: hasLayout hack

Clear float using "clear:both;"

<style>
ul {
 list-style: none;
}

ul li {
 float:left; 
 width:100px; 
 border:1px solid #ccc; 
 margin-right:5px; 
 text-align:center;
}

.clear {
 clear:both;
}

.flower {
 color:red;
 font-weight:bold;
}
</style>

<ul>
<li>coffee</li>
<li>tea</li>
<li>water</li>
</ul>

<div class="clear"></div>
<div class="flower">rose</div>

Add either width or height with a overflow hidden, it should cleared the float, without adding "clear:both;"

<style>
ul {
 list-style: none; 
 width:100%; 
 overflow: hidden;
}

ul li {
 float:left; 
 width:100px; 
 border:1px solid #ccc; 
 margin-right:5px; 
 text-align:center;
}

.clear {
 clear:both;
}

.flower {
 color:red; 
 font-weight:bold;
}
</style>

<ul>
<li>coffee</li>
<li>tea</li>
<li>water</li>
</ul>

<div class="clear"></div>
<div class="flower">rose</div>

Refer site: http://chatter.customdesigns.com.au/?p=123

CSS: Image always stick to left/right

File: styles.css

<style>
.btn_right {
 width: 50px; 
 height: 112px; 
 position: fixed; 
 right: 0pt; 
 top: 62px; 
 margin: 0px; 
 display: block;
}

.btn_left {
 width: 50px; 
 height: 112px; 
 position: fixed; 
 left: 0px; 
 top: 50%; 
 margin: -45px 0px 0px; 
 cursor: pointer; 
 display: block;
}

.btn_close_right {
 display: inline-block; 
 margin-left:30px; 
 width: 20px; 
 height: 18px; 
 background: url('close_icon.png') 0px 0px no-repeat; 
 cursor:pointer;
}
</style>

File: buttons.html

<link rel="stylesheet" type="text/css" href="styles.css" />
<!-- button always stick right -->
<div class="btn_right">
 <img style="cursor:pointer;" src="btn_right.png">
 <br>
 <div class="btn_close_right"></div>
</div>

<!-- button always stick left -->
<div class="btn_left">
 <img src="btn_left.png">
 <br>
 <img src="close_icon.png">
</div>

Positioning Tutorial: http://www.barelyfitz.com/screencast/html-training/css/positioning/

CSS: Simple button hover with image sprite

Step 1: Create a 2-in-1 image, "cancel.jpg" (mouseOut & mouseOver button)

Step 2: Add this code to CSS

.btn {
 background: url('cancel.jpg') no-repeat; 
 background-position: 0 0;
 width:124px; 
 height:40px; 
}
.btn:hover {
 background-position:0 -40px;
}

Step 3: Code in HTML

<a href="index.html" class="btn" title="Cancel"></a>

CSS: Table spacing issue in Gmail

<table width="579" border="0" cellspacing="0" cellpadding="0" class="bg">
<tr><td>
<img src="images/photo01.gif" style="display:block; margin:0px; padding:0px;" width="579" height="110" />
</td></tr>
<tr><td>
<img src="images/photo02.gif" style="display:block; margin:0px; padding:0px;" width="579" height="50">
</td></tr>
</table>

CSS : Rounded Corners without Image 1

The border-radius may be specified individually for each corner, through the use of:

º border-top-left-radius
º border-top-right-radius
º border-bottom-left-radius
º border-bottom-right-radius

At the time of writing, the border-radius properties are not supported in any browser, since the CSS3 border module is still in “Working Draft” status.

However, browsers based on the Gecko rendering engine (Firefox, Mozilla) has experimental support for the border-radius property, and use the vendor-specific -moz- prefix for the properties, making it -moz-border-radius.

#roundrect1{ -moz-border-radius: 2em; border-radius: 2em; background: black; color: white; padding: 15px; width: 200px; }	#roundrect2{ -moz-border-radius: 1em; border-radius: 1em; border: 0.3em solid black; padding: 1.5em; width:200px; }
#roundrect3{ -moz-border-radius:0 2em 0 2em; border: 0.3em solid black; padding: 1.5em; width:200px; }	#roundrect4{ -moz-border-radius:2em 0 2em 0; background: black; color: white; padding: 15px; width:200px; }

Taken From : http://virtuelvis.com/archives/2004/11/imageless-rounded-corners