How to make inner float div inside the outer div

When you put some float div inside another div, The outer div will collapse in other words the size of dimension the outer div will small than the inner float div.

The solution is append a div with clear and block style in the end of the other float inner div as below:
<div id="outer_div">
    <div class="float-style">Item 1</div>
    <div class="float-style">Item 2</div>
    <div class="float-style">Item 3</div>
    <div style="clear:both;display:block;"></div>
</div>

Solution 2: using overflow:auto; in the outer div style can also prevent outer div collapsed. But this method may cause outer div appear scroll bar when new div adding to it.
<div id="outer_div" style="overflow:auto;">
    <div class="float-style">Item 1</div>
    <div class="float-style">Item 2</div>
    <div class="float-style">Item 3</div>
    <div style="clear:both;"></div>
</div>


related link: http://css-tricks.com/all-about-floats/

Page Layout Using DIV

100% height and scroll able div

<html>
  <body style="overflow:hidden;">
    <div style="overflow:auto; position:absolute; top: 0px; left:0px; right:0px; bottom:0px">
    </div>
  </body>
</html>

Fix height header and footer and scroll able main content

<html>
  <body style="overflow:hidden;">
      <div id="header" style="overflow:hidden; position:absolute; top:0; left:0; height:50px;"><div>
      <div id="leftNav" style="overflow:auto; position:absolute; top:50px; left:0px; right:200px; bottom:50px;"></div>
      <div id="mainContent" style="overflow:auto; position:absolute; top:50px; left: 200px; right:0px; bottom:50px;"></div>
      <div id="footer" style="overflow:hidden; position:absolute; bottom:0; left:0; height:50px"></div>
  </body>
</html>

Note: for IE the main content div require doctype definition, without this the div height will not expand to the bottom position.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

About Display inline-block

http://www.impressivewebs.com/inline-block/

http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/

http://www.quirksmode.org/css/display.html

http://www.w3schools.com/cssref/pr_class_display.asp

How To Resize an IFrame to the Size of Its Contents Without Displaying Scroll Bars

be careful to get the body of iframe from document.getElementById() in ie7.
I span a lot of time in this part, in the first begining i retrive iframe body by document.getElementById("iframe1").document.body
but it always get a fixed size value about 600 from the scrollHeight of body attribute, this is confuse me for a long while, after many researched i realized the reason why scrollHeight get a wrong size.

If you retrive the body in iframe by using document.getElementById("iframe1").document.body, you will get the wrong body reference in ie7, because this reference isn't point to the body of the iframe, it's point to the parent's body of iframe, I wonder is it the bug in ie7?

so how do i get the correct iframe's body the answer is window.iframes["iframe1"].document.body or window.iframes[0].document.body.

the conclusion that is document.getElementById("iframe1") and window.iframes["iframe1"] is not the same object in ie7, if you wanna get iframe object it self you can use document.getElementById("iframe1"), if you want to get the document inside the iframe you should use window.iframes["iframe1"] .

yeha it's quit weird, but it solved the real world problem.

<script type="text/javascript">
    var ifrm = null, adjustHeight = 100;

    // Invoke initIfrm() where the page contains iframe element, usually invoke by window.onload event.
    function initIfrm()
    {
        ifrm = document.getElementById(iframeId);
        // firefox
        if(ifrm.addEventListener)
        {
            ifrm.addEventListener("load", resizeHeightEvent, false);
        }
        // IE
        else if(ifrm.attachEvent)
        {
            ifrm.detachEvent("onload", resizeHeightEvent);
            ifrm.attachEvent("onload", resizeHeightEvent);
        }
    }
   
    function resizeHeightEvent()
    {
        var ifrmBody = null;

        // Firefox
        if(typeof (ifrm.contentDocument) == "object")
        {
            ifrmBody = ifrm.contentDocument.body;
        }
        // IE
        else if(typeof (ifrm.document) == "object")
        {
            ifrmBody = window.frames[ifrm.id].document.body;
        }
       
        if(ifrmBody == null)
        {
            throw "the body not found in the page content, ifrmBody is null.";
        }
        // Firefox
        if(ifrm.contentDocument && ifrmBody.offsetHeight)
        {
            ifrm.style.height = (ifrm.contentDocument.body.offsetHeight + adjustHeight) + "px";
        }
        // IE
        else if(ifrm.document && ifrmBody.scrollHeight)
        {
            ifrm.style.height = "100px";
            ifrm.style.height = (ifrmBody.scrollHeight + (ifrmBody.offsetHeight - ifrmBody.clientHeight) + adjustHeight) + "px";
        }
    }

    </script>

In the page declare the iframe like this

<iframe id="iframe1" name="iframe1"  scrolling="no" marginwidth="0" marginheight="0"
            frameborder="0" vspace="0" hspace="0" style="overflow:visible; width:100%; height:100%;"></iframe>

References

Microsoft Support: How To Resize an IFrame to the Size of Its Contents Without Displaying Scroll Bars

 

URL Encoding Reference

URL Encoding Reference

ASCII Character	URL-encoding
space	%20
!	%21
"	%22
#	%23
$	%24
%	%25
&	%26
'	%27
(	%28
)	%29
*	%2A
+	%2B
,	%2C
-	%2D
.	%2E
/	%2F
0	%30
1	%31
2	%32
3	%33
4	%34
5	%35
6	%36
7	%37
8	%38
9	%39
:	%3A
;	%3B
<	%3C
=	%3D
>	%3E
?	%3F
@	%40
A	%41
B	%42
C	%43
D	%44
E	%45
F	%46
G	%47
H	%48
I	%49
J	%4A
K	%4B
L	%4C
M	%4D
N	%4E
O	%4F
P	%50
Q	%51
R	%52
S	%53
T	%54
U	%55
V	%56
W	%57
X	%58
Y	%59
Z	%5A
[	%5B
\	%5C
]	%5D
^	%5E
_	%5F
`	%60
a	%61
b	%62
c	%63
d	%64
e	%65
f	%66
g	%67
h	%68
i	%69
j	%6A
k	%6B
l	%6C
m	%6D
n	%6E
o	%6F
p	%70
q	%71
r	%72
s	%73
t	%74
u	%75
v	%76
w	%77
x	%78
y	%79
z	%7A
{	%7B
|	%7C
}	%7D
~	%7E
	%7F
€	%80
	%81
‚	%82
ƒ	%83
„	%84
…	%85
†	%86
‡	%87
ˆ	%88
‰	%89
Š	%8A
‹	%8B
Œ	%8C
	%8D
Ž	%8E
	%8F
	%90
‘	%91
’	%92
“	%93
”	%94
•	%95
–	%96
—	%97
˜	%98
™	%99
š	%9A
›	%9B
œ	%9C
	%9D
ž	%9E
Ÿ	%9F
	%A0
¡	%A1
¢	%A2
£	%A3
	%A4
¥	%A5
|	%A6
§	%A7
¨	%A8
©	%A9
ª	%AA
«	%AB
¬	%AC
¯	%AD
®	%AE
¯	%AF
°	%B0
±	%B1
²	%B2
³	%B3
´	%B4
µ	%B5
¶	%B6
·	%B7
¸	%B8
¹	%B9
º	%BA
»	%BB
¼	%BC
½	%BD
¾	%BE
¿	%BF
À	%C0
Á	%C1
Â	%C2
Ã	%C3
Ä	%C4
Å	%C5
Æ	%C6
Ç	%C7
È	%C8
É	%C9
Ê	%CA
Ë	%CB
Ì	%CC
Í	%CD
Î	%CE
Ï	%CF
Ð	%D0
Ñ	%D1
Ò	%D2
Ó	%D3
Ô	%D4
Õ	%D5
Ö	%D6
	%D7
Ø	%D8
Ù	%D9
Ú	%DA
Û	%DB
Ü	%DC
Ý	%DD
Þ	%DE
ß	%DF
à	%E0
á	%E1
â	%E2
ã	%E3
ä	%E4
å	%E5
æ	%E6
ç	%E7
è	%E8
é	%E9
ê	%EA
ë	%EB
ì	%EC
í	%ED
î	%EE
ï	%EF
ð	%F0
ñ	%F1
ò	%F2
ó	%F3
ô	%F4
õ	%F5
ö	%F6
÷	%F7
ø	%F8
ù	%F9
ú	%FA
û	%FB
ü	%FC
ý	%FD
þ	%FE
ÿ	%FF

---

URL Encoding Reference

The ASCII device control characters -%1f were originally designed to control hardware devices. Control characters have nothing to do inside a URL.

ASCII Character	Description	URL-encoding
NUL	null character
SOH	start of header	%01
STX	start of text	%02
ETX	end of text	%03
EOT	end of transmission	%04
ENQ	enquiry	%05
ACK	acknowledge	%06
BEL	bell (ring)	%07
BS	backspace	%08
HT	horizontal tab	%09
LF	line feed	%0A
VT	vertical tab	%0B
FF	form feed	%0C
CR	carriage return	%0D
SO	shift out	%0E
SI	shift in	%0F
DLE	data link escape	%10
DC1	device control 1	%11
DC2	device control 2	%12
DC3	device control 3	%13
DC4	device control 4	%14
NAK	negative acknowledge	%15
SYN	synchronize	%16
ETB	end transmission block	%17
CAN	cancel	%18
EM	end of medium	%19
SUB	substitute	%1A
ESC	escape	%1B
FS	file separator	%1C
GS	group separator	%1D
RS	record separator	%1E
US	unit separator	%1F

How to make auto line break in HTML table td element

CSS can imperfectly solved this issue asa below

.table
{
    table-layout: fixed;
}
.td
{
    word-break: break-all;
    word-wrap:break-word;
}