.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix {
display: inline-block;
}
html[xmlns] .clearfix {
display: block;
}
* html .clearfix {
height: 1%;
}
Tag Archive for float
Another CSS Clearfix
Float in Float IE6 margin wrong inherted div width Bug
<body> <div id="page"> <div id="content" style="background-color: yellow;"> <div id="group1573" class="cmsGroup" style="width: 50%; padding: 0%; background-color:red; display:block;"> <!-- Bugfix for IE6 related margin width --> <div style="width: 100%"> <!-- E: Bugfix --> <div id="cell2352" class="cmsCell" style="width: 99.6%; background-color:yellow;"> <p>Box 1</p> </div> <div id="cell3467" class="cmsCell" style="width: 22.58%; float: left; background-color: green; margin-right: 3.09%;"> <div> <p>Box 2</p> </div> </div> <div id="cell1574" class="cmsCell" style="width: 73.93%; background-color:#CC9966;"> <p>Box 3</p> </div> <!-- Bugfix for IE6 related margin width --> </div> <!-- E: Bugfix --> </div> </div> </div> </body>
Various IE Float Bug Fixes
http://www.ninaskitchen.com/fileadmin/template/artikel/css/ie_hacks.html
clearfix
.clearfix:after{
content: "."; display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix{
display: inline-block;
}
html[xmlns] .clearfix{
display: block;
}
* html .clearfix{
height: 1%;
}
Clear Fix
selector:after{
clear:both;
content:"--------------------------------------------------------------------";
display:block;
height:0;
visibility:hidden;
}
Clear Floats
/* HTML
<#container>
<float />
<float />
</#container>
*/
/******** 1ere Methode *********/
#container {
overflow: auto;
}
* html #container {
height: 1%;
}
/******** 2nd Methode *********/
#container:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
#container {
display: inline-block;
}
float to a decimal number
def f_to_dec(f, prec=2,sep='.') f.to_i.to_s+sep+((prec-(post=((f*(10**prec)).to_i%(10**prec)).to_s).size).times do post='0'+post end; post) end
3 Column Layout with floats
<!-- <a href="http://www.bluerobot.com/web/css/fouc.asp/" >http://www.bluerobot.com/web/css/fouc.asp/</a> -->
<!-- <a href="http://leftjustified.net/journal/2004/10/07/css-negotiation/" >http://leftjustified.net/journal/2004/10/07/css-negotiation/</a> -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>XHTML 1.0 conform layout</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<!-- using a link prevents FOUC -->
<style type="text/css" media="screen">
#leftnav{
float: left;
width: 250px;
border: 1px solid green;
}
#rightnav{
float: right;
width: 250px;
border: 1px solid blue;
}
#content{
margin-left: 250px;
margin-right: 250px;
border: 1px solid red;
}
</style>
</head>
<body>
<div id="leftnav">
spalte1
</div>
<div id="rightnav">
spalte2
</div>
<div id="content">
spalte3
</div>
</body>
</html>
CSS Float Clearing
div.container {
border: 1px solid #000000;
overflow: hidden;
width: 100%;
}
div.left {
width: 45%;
float: left;
}
div.right {
width: 45%;
float: right;
}
Round floats
Number.prototype.toFixed=function(x) {
var temp=this;
temp=Math.round(temp*Math.pow(10,x))/Math.pow(10,x);
return temp;
}
Category: Uncategorized |
Tags: decimal, float, integer, javascript, prototype, real, round, tofixed