Clearing Floats


<style>
body {
	width: 610px;
}

#wrap {
	overflow: hidden;
	background: grey;
}
p {
	border: 1px solid black;
}
.test {
	width: 20px;
	height: 20px;
	float: left;
	background: purple;
	margin: 10px;

}
.clearfix:after { 
   content: "."; 
   visibility: hidden; 
   display: block; 
   height: 0; 
   clear: both;
}

.clear {
	clear:both;
}

.float_rt{
	float: right;
}
.testimonial_box{
	background: #f3f;
	 width:324px; 
	 height: 123px;
	 overflow:hidden;
}
</style>
<title>clearing floats</title>
<body>
	<div id="wrap">
		
<p style="background:red">	asdfa
	sadf

</p>
asdfasdf<br>
<div style="background:red; width:100px; height:100px; float:left"></div>
asdfasdf<br>
asdfasdf<br>
asdfasdf<br>
asdfasdf<br>
asdfasdf<br>


<p style="background:blue">	asdfa
	sadf
	sadf
	asdfasdf
	sadf
	sadfsadfs
	asdf
<br>	
	asdfa
	sadf
	sadf
	asdfasdf
	sadf
	sadfsadfs
	asdf
</p>


<div style="width:100px; background:blue">
	<div class="test">1</div>
	<div class="test">2</div>
	<div class="test"></div>
	<div class="test"></div>
	<div class="test"></div>
	<div class="test"></div>
	<div class="clear"></div> <!--used when not inside a container-->
</div>

<div class="clear"></div>
<br />

<div style="width:100px; background:blue" class="clearfix">
	<div class="test">1</div>
	<div class="test">2</div>
	<div class="test"></div>
	<div class="test"></div>
	<div class="test"></div>
	<div class="test"></div>
</div>
<br/>

<div style="width:100px; background:blue; overflow:hidden;">
	<div class="test">1</div>
	<div class="test">2</div>
	<div class="test"></div>
	<div class="test"></div>
	<div class="test"></div>
	<div class="test"></div>
</div>
<br>
<div style="width:100px; background:blue; overflow:hidden;">
	<div class="test">1</div>
	<div class="test float_rt">2</div>
	<div class="test">1</div>
	<div class="test float_rt">2</div>
</div>

<div class="testimonial_box">
	<div class="test">
		<img src="http://stscdn.paravel.netdna-cdn.com/wp-content/uploads/2013/12/minamarkham-125x125.jpg" height="125" width="125">
	</div>
	<div class="test float_rt">
		<p>I've been out of town for the past 10 days just logged in and everything works beautifully!!!</p><br>
		<p>Jan Llyod <br>ASEA</p>
	</div>
</div>
</body>

>960.gs Bookmarklet

>Reference

The bookmarklet below will draw grids on your webpage


javascript:(function(){var%20jqLoader={go:function(){if(!(window.jQuery&&window.jQuery.fn.jquery=='1.3.2')){var%20s=document.createElement('script');s.setAttribute('src','http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js');s.setAttribute('type','text/javascript');document.getElementsByTagName('head')[0].appendChild(s)}this.ok()},ok:function(){if(typeof(window.jQuery)!=='undefined'&&window.jQuery.fn.jquery=='1.3.2'){this.init()}else{setTimeout((function(){jqLoader.ok()}),100)}},init:function(){$.getScript('http://www.badlydrawntoy.com/static/960grid/js/jquery.960grid.bk-1.0.min.js',function(){$('body').addGrid(16)})}};jqLoader.go()})();

Tags:
grid

>Resizing <Table> with CSS. Staying within the wrapper

>Having issues with keeping the table as the same size of the wrapper or parent? See code below.


<style>
/*Center the content*/
#wrapper {
margin: 0px auto;
width: 230px;
height: 100px;
background: grey; /*this is only to show how the table is within the wrapper*/
}
table {
table-layout:fixed; /*makes the table to be a specific size*/
width: inherit; /*need to be include to make the table specific size*/
}
input {
width: 100%;/*size of the input box, keeps the table inside the wrapper*/
}
th{
overflow: hidden; /* hides text overflowing the field*/
}
</style>


<div id="wrapper">
<table border="1">
<tr>
<th id="livesearch">Date</th>
<th id="livesearch2">First_Name</th>
<th id="livesearch3">Last_Name</th>
</tr>
<tr>
<!--the onfocus and onblur what makes the <th> resize when selected, this is not necessary to make the table a fixed size-->
<td ><input onfocus="document.getElementById('livesearch').style.width='100px';" onblur="document.getElementById('livesearch').style.width='auto';"class="date" type="text" /></td>
<td> <input onfocus="document.getElementById('livesearch2').style.width='100px';" onblur="document.getElementById('livesearch2').style.width='auto';" class="type" type="text" /></td>
<td> <input onfocus="document.getElementById('livesearch3').style.width='100px';" onblur="document.getElementById('livesearch3').style.width='auto';" class="type" type="text" /></td>
</tr>
</table>
</div>

Notes: Overflow in table, wrap text in table, table width

>Center HTML/Webpage

>To center your webpage its simple. By setting the width and margin you can achieve this. However, depending on the browser (Internet Explorer) you must include the doctype or it will not work. See the code below

<!DOCTYPE html>
<html>
<body>
<head>
<style>
    #main { 
	    width: 900px; 
        margin: 0 auto; 
    }
</style>
</head>
<body>
    <div id="main">
    </div>
</body>
</html>

resource:
http://www.tipue.com/blog/center-a-div/

>Reset CSS

>Reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on

Paste code below in stylesheet and delete the elements you do no need


/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}

>Creating columns in website

>This tutorial shows how to create columns in website and prevents the div from wrapping when the browser is minimized

Syntax Source:

<html>
<head>
<style>
#main {
width: 600px;
}

.col {
float: left;
border: 1px solid red;
padding: 10px;
margin: 0px 20px 0px 0px;
}
</style>
</head>
<body>

<h1>Columns</h1>
<div id="main">
<div class="col">
<h3>Title</h3>
<p>asdfasdfxiv</p>
<p>asdfasdfxiv</p>
<p>asdfasdfxiv</p>
</div>
<div class="col">
<h3>Title</h3>
<p>asdfasdfxiv</p>
<p>asdfasdfxiv</p>
<p>asdfasdfxiv</p>
</div> <div class="col">
<h3>Title</h3>
<p>asdfasdfxiv</p>
<p>asdfasdfxiv</p>
<p>asdfasdfxiv</p>
</div>
</div>
</body>
</html>