52Framework -|- community revision - <script src="/html5.js"></script> <link rel="stylesheet" type="text/css" href="/reset.css" media="screen" title="Reset by Eric Meyer modified by Angel Grablev for HTML5 interaction"> <link rel="stylesheet" type="text/css" href="/general.css" media="screen"> <link rel="stylesheet" type="text/css" href="/grid.css" media="screen"> <style> * {outline:none !important;} html, body { height: 100%; } .wrap { min-height: 100%; height: auto !important; height: 100%; margin: 0 auto -185px; /* the bottom margin is the negative value of the footer's height */ } footer, .push { height: 185px; /* .push must be the same height as .footer */ } body {font-family: Arial, Helvetica, sans-serif; } header {height:80px; position:relative; margin-bottom:5px;} header nav {height:29px;} nav ul {list-style:none; float:right; margin-top:10px; font-size:1.3em;} nav ul li {float:left; margin-left:5px;} nav ul li a {display:block; color:#01547f; text-decoration:none; padding:5px 8px; margin-top:8px; -moz-border-radius: 10px; -webkit-border-radius: 10px;} nav ul li a:hover, nav ul li.active a {background-color:#01547f; color:#fff;} section.main {width:968px; height:355px; position:relative; background:#fff url(/images/main.jpg); margin:0 auto;} .main article {margin-top:150px; color:#01547f; line-height:1.2em;} .main .html5 { width:193px; margin-left:20px;} .main .css3 { width:210px; margin-left:45px; } .main .what_else { width:319px; margin-left:52px; font-size:1.2em;} .main .buttons {margin-right:12px;} section.contribute { border-bottom:1px solid #01547f;} .brief_features {list-style:none;} .brief_features li {padding-left:20px; background:url(/images/tick.png) no-repeat left; margin-left:5px;} .features_brief {border-top:1px solid #6dcdf5; padding-top:10px;} .features_brief blockquote {margin-top:25px;} footer {height:185px; font-size:.8em; width:100%; background: url(/images/footer_repeater.jpg) repeat-x bottom; margin-top:10px;} footer .inner_wrap {background:url(/images/footer.jpg) no-repeat center; height:100%; margin:0 auto;} footer .enavu_network img {margin-top:40px;} footer section { margin-top:35px; color:#01547e;} .the_network {float:right; margin-top:60px; list-style:none;} .the_network li {float:left; width:110px;} .the_network li a {display:block; padding:3px 5px; font-size:1.2em; font-weight:600; text-decoration:none; color:#01547e; border:1px dashed #fff; background:url(/images/px.png) repeat;} .the_network li a:hover {background:#fff;} .the_network li a span {font-size:.8em; display:block; font-weight:normal; line-height:1.152em;} </style> <script type="text/javascript" src="/scripts/shCore.js"></script> <script type="text/javascript" src="/scripts/shBrushBash.js"></script> <script type="text/javascript" src="/scripts/shBrushCss.js"></script> <script type="text/javascript" src="/scripts/shBrushDiff.js"></script> <script type="text/javascript" src="/scripts/shBrushJScript.js"></script> <script type="text/javascript" src="/scripts/shBrushPlain.js"></script> <script type="text/javascript" src="/scripts/shBrushXml.js"></script> <link type="text/css" rel="stylesheet" href="/styles/shCore.css"/> <link type="text/css" rel="stylesheet" href="/styles/shThemeDefault.css"/> <script type="text/javascript"> SyntaxHighlighter.config.clipboardSwf = '/scripts/clipboard.swf'; SyntaxHighlighter.all(); </script> <script src="/js/jquery-1.3.2.min.js"></script> <script src="/js/jquery.autogrow.js"></script> <script> $(document).ready(function(){$(".grow").autogrow();}); </script> <body> <section class="wrap"> <section class="wrap_16"> <header> <div class="logo left"><a href="/"><img src="/images/logo.jpg" alt="52framework" /></a></div> <nav> <ul> <li><a href="/home">home</a></li> <li><a href="http://demo.52framework.com">demo</a></li> <li><a href="/blog">blog</a></li> <li class="active"><a href="/community">community</a></li> <li><a href="/documentation">documentation</a></li> <li><a href="/user">login/signup</a></li> </ul> </nav> <div class="clear"></div> </header> </section> <section class="features wrap_16"> <div class="col_10"> <div class="back_to_docs" style="margin-bottom:10px;"><a href="/community"><< Back to community</a></div> <div class="section" style="margin-bottom:10px; border-bottom:1px solid #ccc; padding-bottom:10px;"> <h1>Change “classic” clearing element to more modern approach</h1> <p>Posted By: <b><u>dtigraphics</u></b> | Date Posted: Sunday, Apr 11th 2010</p> <div class="overv"><h3>Overview</h3> <p>I’m surprised that this “modern” framework is still relying on a 4+ year old method that adds structural markup to solve the float problem. There are many “breakthrough” methods out there and while the below solution (originally written by Andy Clarke). Although IE7 forced everyone to freak a bit a solution was added the original IMHO, superior solution. Again, this works in every situation I’ve ever used. As an aside I’ve been using the below code (changed .clearfix to .cf for brevity) since the original article was written. Possible changes would be moving the * html hack to the IE stylesheet… </p> </div> <div class="reas"><h3>Reason</h3> <p>Unlike the solution that uses <code>overflow: auto; height: auto;</code> the above works is ALL situations. I use positioning whenever I can to get around IE float bugs. However, when I need to float a few elements I will always use this method; has worked with every site I’ve ever coded and I never need to worry about future changes to my CSS…essentially future-proofing the site. </p> </div> <div class="chang"><h3>Change</h3> <code><br /> /* This needs to be first because FF3 is now supporting this */<br /> .cf {display: inline-block;}<br /> <br /> .cf:after {<br /> content: " ";<br /> display: block;<br /> height: 0;<br /> clear: both;<br /> font-size: 0;<br /> visibility: hidden;<br /> }<br /> <br /> * html .cf {height: 1%;}<br /> .cf {display: block;}<br /> </code> </div> </div> <style> .comments {list-style:none;} .comments li {margin-left:0; margin-bottom:10px; border-bottom:1px solid #eaeaea; border-right:1px solid #ccc;} .comments li .comment_content {font-family:Georgia, "Times New Roman", Times, serif; color:#333;} .comments li .header {font-size:1.1em;} </style> <h3>Comments</h3> <ul class="comments"> <li style="position:relative;"><p class="header">By <b>agrublev</b> </p> <span style="position:absolute; right:0; top:0; background-color:#eaeaea; border-left:1px solid #ccc; padding-left:5px; padding-right:5px; padding-top:2px;"> Sunday, Apr 11th 2010 </span> <span class="comment_content"><p>I have seen that approach before, i will definitely read into it. I hope you can see that adding 4 different CSS specifications to accomplish the exact same thing the current method has done flawlessly 100% for me in over 200-300 websites might not be optimal. </p> <p>But as a person who loves to use the best and newest i will research on the manner and do some testing on my own <img src="http://www.52framework.com/images/smileys/smile.gif" width="19" height="19" alt="smile" style="border:0;" /> I’ll even write an article one this.</p> <p>Thanks </p></span> </li> <li style="position:relative;"><p class="header">By <b>dtigraphics</b> </p> <span style="position:absolute; right:0; top:0; background-color:#eaeaea; border-left:1px solid #ccc; padding-left:5px; padding-right:5px; padding-top:2px;"> Monday, Apr 12th 2010 </span> <span class="comment_content"><p>Agreed. If you must use markup to clear floats why not use something more meaningful; <hr class=“clear” > would be fine?</p> <p>Also, the newest method is to use overflow: auto; and height: auto; (parent container height) but this solution is a bit more problematic… </p></span> </li> <li style="position:relative;"><p class="header">By <b>agrublev</b> </p> <span style="position:absolute; right:0; top:0; background-color:#eaeaea; border-left:1px solid #ccc; padding-left:5px; padding-right:5px; padding-top:2px;"> Monday, Apr 12th 2010 </span> <span class="comment_content"><p>Yeah i want to play with the overflow:auto and height: auto;. There also is a default clear using html’s br element. <br clear=“all” </p> <p>Anyways as i said i would love to do some testing of my own when i get a second to see if there really could be ANY difference in the methods. </p></span> </li> </ul> <h3>Add Comment</h3> Please <a href="/user">Login/Signup</a> to add Comments