SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 28
  1. #1
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,756
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Is Clearfix still valid?

    Is the Clearfix code below still valid or relevant??
    Code:
    /* Allow Container Box to "clear" a Floated item. */
    /* For more info see: "http://www.positioniseverything.net/easyclearing.html" */
    .clearfix:after{
    	content: ".";															/* Append a period to element. */
    	display: block;														/* Set as Block element. */
    	clear: both;															/* Apply clear to move Container Box below Float. */
    	height: 0;																/* Keep period from showing. */
    	visibility: hidden;												/* Keep period from showing. */
    }
    
    /* IE and Mac fix */
    .clearfix{
    	display: inline-block;
    }
    
    /* Fixes bug in Opera which doesn't usually like 100% height.
    		We move the float way above the viewport out of the way of everything. */
    .clearfix{
    	display: block;
    }
    
    /* What does this do? */
    /*Opera Fix*/
    body:before{																/* thanks to Maleika (Kohoutec)*/
    	content: "";
    	height: 100%;
    	float: left;
    	width: 0;
    	margin-top: -32767px;											/* thank you Erik J - negate effect of float*/
    }

    Debbie

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,097
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    This thread may be of interest:

    http://www.sitepoint.com/forums/css-...ml#post4936735

    There seems to be a lot of tinkering needed to get this just right in all browsers in all circumstances.

    From memory, the suggestion from that thread was to use the third version on this page:

    http://www.tjkdesign.com/lab/clearfix/new-clearfix.html
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,756
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    This thread may be of interest:

    http://www.sitepoint.com/forums/css-...ml#post4936735

    There seems to be a lot of tinkering needed to get this just right in all browsers in all circumstances.

    From memory, the suggestion from that thread was to use the third version on this page:

    http://www.tjkdesign.com/lab/clearfix/new-clearfix.html
    How well versed are you on this topic?

    I could use some help understanding code that Paul O' shared with me that seems to work but which doesn't mean much to me...



    Debbie

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,097
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    The clearfix:after part adds some pseudo content at the end of the conatiner, which forces the container to wrap around any floats to contain the pseudo content. That pseudo content (be it a period or just blank space) is hidden so that it won't have any visual effect on the layout.

    The rest of the code is to massage certain browsers in the right direction. That's the best I can do.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  5. #5
    Utopia, Inc. silver trophy
    ScallioXTX's Avatar
    Join Date
    Aug 2008
    Location
    The Netherlands
    Posts
    9,031
    Mentioned
    152 Post(s)
    Tagged
    2 Thread(s)
    I personally consider clearfix to be poor man's fix-it-all CSS class. Sure it works, but if you do everything correctly there is absolutely no need for it.
    For example you can also add an overflow other than visible (the default) to a container and it will close properly. There are some others like float left, but in most of the cases you can use overflow just fine and don't need to resort to other measures.

    So, is it valid? Sure, it works and will probably work for a long time to come.
    Is it recommended? No, I don't think it is.
    Rémon - Hosting Advisor

    Minimal Bookmarks Tree
    My Google Chrome extension: browsing bookmarks made easy

  6. #6
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,756
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ScallioXTX View Post
    I personally consider clearfix to be poor man's fix-it-all CSS class. Sure it works, but if you do everything correctly there is absolutely no need for it.
    For example you can also add an overflow other than visible (the default) to a container and it will close properly. There are some others like float left, but in most of the cases you can use overflow just fine and don't need to resort to other measures.

    So, is it valid? Sure, it works and will probably work for a long time to come.
    Is it recommended? No, I don't think it is.
    So maybe you can help me write better code??

    Here is a link to my test website.

    The code is largely from Paul O' and it works just fine, but I am trying to clean it up and get a better grasp of what the code actually says, because if you asked me to code this on my own a year after Paul O' and others helped me out here on SitePoint, I'd be screwed!!


    Debbie

  7. #7
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,756
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    I'm trying to get my brain around this code after not having looked at it for over a year...

    As I recall, Paul O' helped me create a Max-Min, 3-Column, Colored Full-Height Columns, Fluid Design with Sticky Footer. (I ended up ditching the Color, Full-Height part.)

    In the stripped down sample above, I have...

    - pageWrapper
    - pageInner
    - pageHeader
    - pageLeftCol
    - pageMidCol_3
    - page RightCol
    - pageFooter

    With a 3-column layout, pageInner ends up be 400px too wide and so I use a negative margin of 400px to compensate.

    In main.css I have...
    Code:
    /******************************************************************************/
    /* MISC STYLES																																*/
    /******************************************************************************/
    
    /* Allow Container Box to "clear" a Floated item. */
    /* For more info see: "http://www.positioniseverything.net/easyclearing.html" */
    .clearfix:after{
    	content: ".";															/* Append a period to element. */
    	display: block;														/* Set as Block element. */
    	clear: both;															/* Apply clear to move Container Box below Float. */
    	height: 0;																/* Keep period from showing. */
    	visibility: hidden;												/* Keep period from showing. */
    }
    
    /* IE and Mac fix */
    .clearfix{
    	display: inline-block;
    }
    
    /* Fixes bug in Opera which doesn't usually like 100% height.
    		We move the float way above the viewport out of the way of everything. */
    .clearfix{
    	display: block;
    }
    
    /* What does this do? */
    /*Opera Fix*/
    body:before{																/* thanks to Maleika (Kohoutec)*/
    	content: "";
    	height: 100%;
    	float: left;
    	width: 0;
    	margin-top: -32767px;											/* thank you Erik J - negate effect of float*/
    }
    I have some similar (read "redundant") code in my top_menu.css for the pageHeader, but maybe we can focus on the first clearfix above?

    (I know I saw some tirade by DeathShadow - there's a surprise - about how ClearFix is unnecessary. All I care about is that my website works on IE6 forward and all other major browsers and versions...)

    Thanks,


    Debbie

  8. #8
    Utopia, Inc. silver trophy
    ScallioXTX's Avatar
    Join Date
    Aug 2008
    Location
    The Netherlands
    Posts
    9,031
    Mentioned
    152 Post(s)
    Tagged
    2 Thread(s)
    That page -no offence- looks like your garden variety three column layout, of which Paul O'B has a great example here: http://www.pmob.co.uk/temp/3col-overflow-toggle.htm

    Anyway, why do you want to recode a page that you built a year ago, that was "given" to you by Paul O'B no less?
    Rémon - Hosting Advisor

    Minimal Bookmarks Tree
    My Google Chrome extension: browsing bookmarks made easy

  9. #9
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,756
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ScallioXTX View Post
    That page -no offence- looks like your garden variety three column layout, of which Paul O'B has a great example here: http://www.pmob.co.uk/temp/3col-overflow-toggle.htm
    I never said it was anything special, but it is still "complex" to my tiny little brain...



    Anyway, why do you want to recode a page that you built a year ago, that was "given" to you by Paul O'B no less?
    I wouldn't say "given"...

    Paul - and others - spent a fair time helping me understand things and tweak things, but I did a lot of legwork too!

    Why recode it?

    1.) Because I don't truly understand all of the code and never got answers to many of my commented questions.

    2.) Because I want to really understand each line and be able to code it on command. (I can do that with some of it, but not all of it like the ClearFix stuff.

    3.) My CSS has grown messy and needs to be improved.

    4.) I want to code HTML/CSS the way it *should* be (e.g. using <em> instead of <div>)

    5.) I have some "bugs" that I can't figure out (e.g. getting rounded corners to work on some parts you can't see yet) and that is a sign that my code has turned to crap

    So are you gonna help me get better or what?!


    Debbie

  10. #10
    Utopia, Inc. silver trophy
    ScallioXTX's Avatar
    Join Date
    Aug 2008
    Location
    The Netherlands
    Posts
    9,031
    Mentioned
    152 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by DoubleDee View Post
    1.) Because I don't truly understand all of the code and never got answers to many of my commented questions.
    That's why you have your other thread right now, isn't it?

    Quote Originally Posted by DoubleDee View Post
    2.) Because I want to really understand each line and be able to code it on command. (I can do that with some of it, but not all of it like the ClearFix stuff.
    That's the same as 1.), but phrased differently

    Quote Originally Posted by DoubleDee View Post
    3.) My CSS has grown messy and needs to be improved.
    The way to improve is not to do the same thing over and over again, but trying something new every time (IMHO), and to take a look at what others did and their solution applies to what you want to do.

    Quote Originally Posted by DoubleDee View Post
    4.) I want to code HTML/CSS the way it *should* be (e.g. using <em> instead of <div>)
    That's about semantics and has nothing to do with CSS. There are a lot of good threads in the HTML and XHTML forum you can read about this, e.g., <strong> vs <b>

    Quote Originally Posted by DoubleDee View Post
    5.) I have some "bugs" that I can't figure out (e.g. getting rounded corners to work on some parts you can't see yet) and that is a sign that my code has turned to crap
    How do you expect people to help with stuff they can't see?
    Rémon - Hosting Advisor

    Minimal Bookmarks Tree
    My Google Chrome extension: browsing bookmarks made easy

  11. #11
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,756
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ScallioXTX View Post
    That's why you have your other thread right now, isn't it?
    Yes, but ClearFix seems like a large enough topic to create a new thread...



    The way to improve is not to do the same thing over and over again, but trying something new every time (IMHO), and to take a look at what others did and their solution applies to what you want to do.
    Right!

    So how about showing me how I can 86 the ClearFix and use something better...


    That's about semantics and has nothing to do with CSS. There are a lot of good threads in the HTML and XHTML forum you can read about this, e.g., <strong> vs <b>
    That's why I said HTML/CSS, and it was just an example to answer your question...


    How do you expect people to help with stuff they can't see?
    I posted both my ClearFix code and a url to my test website.

    What specifically did you want?


    Debbie

  12. #12
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,791
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    Answering your question, .clear:fix is still valid. Much in the same way a bi-plane is still a valid airplane.

    Just because, something gets old, doesn't mean it becomes invalid.. or that it still doesn't have its applications ( crop dusting, for example).


    If you want to clear floats ( and do not just happen to have an element below the float to which you could give clear:both)... first thing to use theses day is giving the CONTAINER overflow:hidden/auto; Yup, that's it and it's probably what you heard Paul OB mention since I believe it was his own discovery. It really is quite handy a method, as it TOTALLY cross browser friendly, logical and one declaration long.

    It' has one drawback. That is you cant move thing out of the container if you use this method.

    The alternative some have suggested.. is (instead of overflow:hidden; ) use display:table; again this clear all contained floats.. JUST LIKE overflow auto and allows for things to overflow the container when needed ( as in positioning or negative margins)

    What's the catch? Am glad you asked. First there are certain inherent problems with margins/AP when it comes tho children of tables. These are ,essentially, the same reasons why you cant AP a TD, or control its " margins" ( note I put that word in quotes) as you would a block element.

    ALSO IE HAS TO BE A HEADACHE... It wouldn't be IE otherwise. Legacy IE (lt 8) doesn't get display: table. :/. So if you have to overflow a container for positioning purposes, then we have in a sense come full circle.

    One way to get around this is to use display: inline-block for legacy IE and some fixes.

    However I have gotten into the habit of SPLINTING the two (three) cases.
    1. Container with floated elements and a FINAL non floated element which appears below all the others.. JUST give the final element clear both... I mean REALLY.. why go through any more haste.
    2. The same as above but w/o any non floated element to appear below all neatly contained in one wrapper. This means no AP outside the wrapper or elements protruding through negative margins. Simple overflow:hidden; will do in this case.


    For anything that doesn't fit these criteria I have developed this method:
    Code:
    .raysCF:after, .raysCF .after {
    content:"";
    display:block;
    clear:both;
    zoom:expression(
    		runtimeStyle.zoom=1,
    		insertAdjacentHTML('beforeEnd','<span class="after"></span>')
    	);	
    /*not found to be necessary but I inclculde this  JIC*/
    	visibility: hidden;
    	line-height: 0;
    	height: 0;
    }
    IDEALLY... I would actually use .raysCF>.after.. but that would limit support to IE gte 7. So at this point I either do that or keep in mind that I am creating faux pseudo elements for legacy IE. And that generally covers all the bases.

    I hope that sheds some light on the subject for you.

  13. #13
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,756
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    dresden_phoenix,

    I feel *dizzy*

    Thanks for your response, but I feel like this is going over my head quickly.

    Before I look at tweaking what I have, can you please comment on my current layout?

    Here is index.php
    Code:
    <!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">
    
    <head>
    	<!-- ################## DEBBIE ##################### -->
    	<!-- HTML Metadata -->
    	<title>Debbie's Site</title>
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    
    	<!-- Page Stylesheets -->
    	<link type="text/css" rel="stylesheet" href="css/_main.css" />
    	<link type="text/css" rel="stylesheet" href="css/_layout.css" />
    	<link type="text/css" rel="stylesheet" href="css/top_menu.css" />
    </head>
    
    <body>
    	<div id="pageWrapper" class="clearfix">
    		<div id="pageInner">
    			<!-- BODY HEADER -->
    			<?php	require_once('components/body_header.inc.php');	?>
    
    			<!-- LEFT COLUMN -->
    			<div id="pageLeftCol">
    				left
    				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris quam nisi,
    				egestas mattis commodo a, adipiscing eget erat. Vestibulum ante ipsum primis
    				in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce ultrices
    				lacus nec leo mattis vestibulum. Donec pharetra luctus nisl et sollicitudin.
    				Aliquam faucibus tellus at orci pretium faucibus. Duis malesuada, enim ac
    				luctus auctor, metus libero dictum nunc, vitae imperdiet est massa eget
    				massa. Nulla quis tellus volutpat metus tincidunt laoreet. Phasellus
    				arcu metus, ullamcorper in cursus vitae, ultricies nec eros. Proin vitae
    				malesuada enim. Vestibulum in ligula a ante consequat bibendum. Sed
    				volutpat, arcu eget suscipit aliquam, ligula mi ornare tellus, nec
    				ornare orci justo in tellus. Nullam in scelerisque arcu. Proin nec
    				euismod metus.
    
    				Sed vitae libero eget nibh ullamcorper pellentesque. Nulla elementum
    				varius luctus. Quisque lectus ipsum, suscipit sit amet interdum in,
    				sollicitudin vitae nibh. Vestibulum consequat rutrum nulla, vel commodo
    				eros egestas in. Praesent feugiat imperdiet purus a interdum. Donec
    				aliquam tincidunt nisi, ac congue est laoreet venenatis. Class aptent
    				taciti sociosqu ad litora torquent per conubia nostra, per inceptos
    				himenaeos. Aliquam erat volutpat. Sed quis varius felis. Phasellus
    				interdum libero non lorem accumsan placerat. Vivamus rutrum ultricies
    				risus, a tincidunt ligula lacinia et. Ut accumsan interdum neque sed
    				varius. Etiam nec nisi in massa vulputate convallis. Donec euismod
    				dictum enim, nec rutrum sem blandit a. Fusce nulla urna, egestas vel
    				condimentum sed, dignissim vitae quam.
    			</div><!-- End of #LEFT -->
    
    
    			<!-- MIDDLE COLUMN -->
    			<div id="pageMidCol_3">
    				middle
    				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris quam nisi,
    				egestas mattis commodo a, adipiscing eget erat. Vestibulum ante ipsum primis
    				in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce ultrices
    				lacus nec leo mattis vestibulum. Donec pharetra luctus nisl et sollicitudin.
    				Aliquam faucibus tellus at orci pretium faucibus. Duis malesuada, enim ac
    				luctus auctor, metus libero dictum nunc, vitae imperdiet est massa eget
    				massa. Nulla quis tellus volutpat metus tincidunt laoreet. Phasellus
    				arcu metus, ullamcorper in cursus vitae, ultricies nec eros. Proin vitae
    				malesuada enim. Vestibulum in ligula a ante consequat bibendum. Sed
    				volutpat, arcu eget suscipit aliquam, ligula mi ornare tellus, nec
    				ornare orci justo in tellus. Nullam in scelerisque arcu. Proin nec
    				euismod metus.
    
    				Sed vitae libero eget nibh ullamcorper pellentesque. Nulla elementum
    				varius luctus. Quisque lectus ipsum, suscipit sit amet interdum in,
    				sollicitudin vitae nibh. Vestibulum consequat rutrum nulla, vel commodo
    				eros egestas in. Praesent feugiat imperdiet purus a interdum. Donec
    				aliquam tincidunt nisi, ac congue est laoreet venenatis. Class aptent
    				taciti sociosqu ad litora torquent per conubia nostra, per inceptos
    				himenaeos. Aliquam erat volutpat. Sed quis varius felis. Phasellus
    				interdum libero non lorem accumsan placerat. Vivamus rutrum ultricies
    				risus, a tincidunt ligula lacinia et. Ut accumsan interdum neque sed
    				varius. Etiam nec nisi in massa vulputate convallis. Donec euismod
    				dictum enim, nec rutrum sem blandit a. Fusce nulla urna, egestas vel
    				condimentum sed, dignissim vitae quam.
    			</div><!-- End of #MIDDLE -->
    
    
    			<!-- RIGHT COLUMN -->
    			<div id="pageRightCol">
    				right
    				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris quam nisi,
    				egestas mattis commodo a, adipiscing eget erat. Vestibulum ante ipsum primis
    				in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce ultrices
    				lacus nec leo mattis vestibulum. Donec pharetra luctus nisl et sollicitudin.
    				Aliquam faucibus tellus at orci pretium faucibus. Duis malesuada, enim ac
    				luctus auctor, metus libero dictum nunc, vitae imperdiet est massa eget
    				massa. Nulla quis tellus volutpat metus tincidunt laoreet. Phasellus
    				arcu metus, ullamcorper in cursus vitae, ultricies nec eros. Proin vitae
    				malesuada enim. Vestibulum in ligula a ante consequat bibendum. Sed
    				volutpat, arcu eget suscipit aliquam, ligula mi ornare tellus, nec
    				ornare orci justo in tellus. Nullam in scelerisque arcu. Proin nec
    				euismod metus.
    
    				Sed vitae libero eget nibh ullamcorper pellentesque. Nulla elementum
    				varius luctus. Quisque lectus ipsum, suscipit sit amet interdum in,
    				sollicitudin vitae nibh. Vestibulum consequat rutrum nulla, vel commodo
    				eros egestas in. Praesent feugiat imperdiet purus a interdum. Donec
    				aliquam tincidunt nisi, ac congue est laoreet venenatis. Class aptent
    				taciti sociosqu ad litora torquent per conubia nostra, per inceptos
    				himenaeos. Aliquam erat volutpat. Sed quis varius felis. Phasellus
    				interdum libero non lorem accumsan placerat. Vivamus rutrum ultricies
    				risus, a tincidunt ligula lacinia et. Ut accumsan interdum neque sed
    				varius. Etiam nec nisi in massa vulputate convallis. Donec euismod
    				dictum enim, nec rutrum sem blandit a. Fusce nulla urna, egestas vel
    				condimentum sed, dignissim vitae quam.
    			</div><!-- End of #RIGHT -->
    
    		</div><!-- End of #INNER -->
    	</div><!-- End of #WRAPPER -->
    
    	<!-- BODY FOOTER -->
    	<?php	//require_once('components/body_footer.inc.php');	?>
    </body>
    
    </html><?php //Build Date: 2011-11-12 ?>

    And here _layout.css
    Code:
    /******************************************************************************/
    /* PAGE LAYOUT STYLES																													*/
    /******************************************************************************/
    #pageWrapper{
    	position: relative;												/* Create Containing Block. */
    	z-index: 0;																/* Place below other elements */
    	min-width: 760px;
    	max-width: 1200px;
    	min-height: 100%;													/* WHAT IS THIS?? */
    	margin:	0px auto;
    	margin-top: -60px;												/* Make space for Footer. */
    	background: #FFF;													/* Fill-Color for short Middle Column. */
    	text-align: left;	/* ??? */
    }
    
    /* Holds 3 Columns and hides portion sticking out to the right. */
    #pageInner{
    	position: relative;												/* Create Containing Block. */
    	z-index: 3;																/* Raise above Colored Columns. */ /* NEEDED?? */
    	width: 100%;
    	overflow: hidden;													/* Hides Middle Column hanging outside of viewport. */
    }
    
    #pageHeader{
    	position: relative;												/* Create Containing Block. */
      z-index: 3;																/* Raise above Colored Columns. */ /* NEEDED?? */
    	clear: both;															/* PURPOSE??? */
    	width: 100%;															/* Width of Viewport. */
    	padding: 0;																/* NEEDED?? */
    	color: #000;															/* NEEDED?? */
    	background: #FFF;													/* NEEDED?? */
    	border-top: 60px solid #F00;							/* Compensates for negative margin in Wrapper
    																								which was used to make way for Footer. */
    }
    
    /* All 3 columns below are floated left.
    		Left Col is 200px wide.
    		Middle Col is 100% wide and thus extends 200px beyond viewport.
    		Right Col is 200px wide and thus extends 400px beyond viewport.
    		Middle Col has -400px Right Margin to move Right Col back into viewport. */
    #pageLeftCol{
    	position: relative;												/* Create Containing Block. */
    	z-index: 2;																/* ????? */
    	float: left;
    	width: 200px;
    	overflow: hidden;													/* NEEDED?? */
    	font-size: 0.8em;													/* NEEDED?? */
    }
    
    #pageMidCol_3{
    /* By floating the Middle Column we avoid the IE6 3 pixel jog and also keep
    		columns in normal source order (i.e. Left, Middle, Right), but we need
    		to use a negative margin offset to make it all fit. */
    
    /*	position: relative;											/* Why doesn't this exist? */
    /*	z-index: 2;															/* Why doesn't this exist? */
    	float: left;
    	width: 100%;															/* Width of Viewport. */
    	margin-right: -400px;											/* Compensate for 200px Left & Right Columns. */
    }
    
    #pageMidCol_2{
    	/* Each of the two columns are floated left.
    			Middle Col is 100% wide and thus extends to the edge of the viewport.
    			Right Col is 200px wide and thus extends 200px beyond viewport.
    			Middle Col has -200px Right Margin to move Right Col back into viewport. */
    
    /*	position: relative;											/* Why doesn't this exist? */
    /*	z-index: 2;															/* Why doesn't this exist? */
    	float: left;
    	width: 100%;															/* Width of Viewport. */
    	margin-right: -200px;											/* Compensate for 200px Right Column. */
    }
    
    #pageMidCol_1{
    /*	position: relative;											/* Why doesn't this exist? */
    /*	z-index: 2;															/* Why doesn't this exist? */
    	float: left;
    	width: 100%;															/* Width of Viewport. */
    }
    
    #pageRightCol{
    	position: relative;												/* What does this do? */
    	z-index: 2;																/* What does this do? */
    	float: right;
    	width: 200px;
    	overflow: hidden;													/* Why doesn't this exist like in LEFT?? */
    	font-size: 0.8em;													/* NEEDED?? */
    }
    
    #pageFooter{
    	/* This is located BELOW the wrapper. */
    	position: relative;												/* What does this do? */
    	z-index: 2;																/* What does this do? */
    	clear: both;															/* NEEDED?? */
    	min-width: 760px;													/* Same min-width as #wrapper. */
    	max-width: 1200px;												/* Same max-width as #wrapper. */
    	height: 60px;															/* Must match Negative Top-Margin in #wrapper. */
    	margin: 0 auto;														/* NEEDED ?? */
    	text-align: center;
    	font: normal 14px/15px arial,helvetica,sans-serif;		/* NEW */ /* How does this affect Total Height of 60px?? */
    	color: #000;
    	background: #DDD;
    }

    And here is main.css which contains the ClearFix styles at the bottom of the code. (Note: I have some more extraneous ClearFix code in my top_menu.css file, but let's save that for later?!)
    Code:
    /******************************************************************************/
    /* GENERAL STYLES																															*/
    /******************************************************************************/
    *{
    	margin: 0;
    	padding: 0;
    }
    
    html,
    body{
    	height: 100%;															/* For IE6 ???	Will expand beyond 100% */
    }
    
    body{
    	font-family: Helvetica, Arial, Sans-Serif;
    	line-height: 1.4em;
    	font-size: 0.9em;
    	background: #FFF;
    }
    
    h1, h2, h3, h4{
    	padding: 0.5em 0 0 0;
    	text-align: center;
    }
    
    p{
    	padding: 0.5em 1em;
    }
    
    
    
    
    
    /******************************************************************************/
    /* HEADER STYLES																															*/
    /******************************************************************************/
    #logo{
    	float: left;
    	margin: 0.5em 18px 1em 0;
    }
    
    #topMenu{
    	clear: both;
    }
    
    
    /******************************************************************************/
    /* FOOTER STYLES																															*/
    /******************************************************************************/
    #footer ul{
    	list-style: none;
    	padding: 22px 0 23px 0;
    }
    
    #footer ul li{
    	display: inline;
    }
    
    #footer ul li a{
    	margin: 0 1em;
    }
    
    
    /******************************************************************************/
    /* MISC STYLES																																*/
    /******************************************************************************/
    
    /* Allow Container Box to "clear" a Floated item. */
    /* For more info see: "http://www.positioniseverything.net/easyclearing.html" */
    .clearfix:after{
    	content: ".";															/* Append a period to element. */
    	display: block;														/* Set as Block element. */
    	clear: both;															/* Apply clear to move Container Box below Float. */
    	height: 0;																/* Keep period from showing. */
    	visibility: hidden;												/* Keep period from showing. */
    }
    
    /* IE and Mac fix */
    .clearfix{
    	display: inline-block;
    }
    
    /* Fixes bug in Opera which doesn't usually like 100% height.
    		We move the float way above the viewport out of the way of everything. */
    .clearfix{
    	display: block;
    }
    
    /* What does this do? */
    /*Opera Fix*/
    body:before{																/* thanks to Maleika (Kohoutec)*/
    	content: "";
    	height: 100%;
    	float: left;
    	width: 0;
    	margin-top: -32767px;											/* thank you Erik J - negate effect of float*/
    }

    This code appears to work "as-is" - although I'm lame and haven't tested it on IE since I am on a Mac!

    Can you (and others) please comment on how I have things laid out and styled? (Most of this was taken from Paul O' and then tweaked and I added lots of comments to make it clearer, but some things like ClearFix and "clearing floats" still kinda confuse me?!)

    Thanks,


    Debbie

  14. #14
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,791
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    breeeeeeeathe.


    It's a matter of THOUGHT not really of code ( actually this is true of all CSS solutions).

    Let's examine what .clearfix does, shall we? Actually, it's best to think of what used to be done before someone came up with .clearfix.

    Code:
    #sidebar {float:left; width:250px;}
    #content {margin-left:250px;  /*OR  simply float:right: width:550px;*/}
    <div id="container">
       <div id="sidebar">floated left</div>
       <div id="content"> possibly floated right</div>
    </div>
    In the above example , because the children elements were floated and thus taken OUT of the FLOW, #container would collapse. This means if you had a background in #container you wouldnt be able to see it... . To solve this poroblem, what you needed was another element that came after wards in the code...to CLEAR the float(s). This was simple if you had another hand element with content:[CODE]
    Code:
    #sidebar {float:left; width:250px;}
    #content {margin-left:250px;  /*OR  simply float:right: width:550px;*/}
    #convenientContent{clear:both;}
    <div id="container">
       <div id="sidebar" style="f>floated left</div>
       <div id="content"> possibly floated right</div>
        <div id="convenientContent" >Convinently we just had extra content to go here.. bellow the main content AND sidebar</div>
    </div>
    Wow... that solved it.

    But what if we didn't have anything to say after the main content and sidebar? no convenient content!?!? Well then peopel just left teh element BLANK as a clearing element .

    Code:
    #sidebar {float:left; width:250px;}
    #content {margin-left:250px;  /*OR  simply float:right: width:550px;*/}
    .clear{clear:both;}
    <div id="container">
       <div id="sidebar" style="f>floated left</div>
       <div id="content"> possibly floated right</div>
        <div class="clear" ></div>
    </div>
    It works.. but then that meant that you had to have this BLANK element, simply for the sake of presentation each time you needed to clear a float... UGH, right?

    Well around that point :before /:after came into play and utilized in clever FIX.

    .CLEARFIX essentially GENERATED that " <div class="clear" ></div>" of the above example w/o the need to have that extra mark up.

    Code:
    #sidebar {float:left; width:250px;}
    #content {margin-left:250px;  /*OR  simply float:right: width:550px;*/}
    .clearFIX:after{content:""; display:block; clear:both;}
    <div id="container" class="clearFIX">
       <div id="sidebar" style="f>floated left</div>
       <div id="content"> possibly floated right</div>
    </div>
    SIGH... it had some quirks with early versions of opera( i wouldn't worry about those anymore ) and OF COURSE IE didnt support the VITAL :after element.

    So what would have been a simple elegant solution started requiring all sorts of hacks and extra code.. ( which is what you showed in your example) ... but I won't delve into those now.

    note that other than adding the class "clearfix" YOUR markup is still clean. Heck techincally, if you wanted to be like DS60, you could just apply those rules directly to where they are needed (in my example that would be #container{content:""; display:block; clear:both;}) and you wouldn't even have to add the class!



    I personally go around IE *****yness by using IE specific features ( heck since it was an IE mostly problem why not solve it with IE code.. right?)


    Thus MY version of clearfix was :
    Code:
    .raysCF:after, .raysCF .after {
    content:"";
    display:block;
    clear:both;
    zoom:expression(
    		runtimeStyle.zoom=1,
    		insertAdjacentHTML('beforeEnd','<span class="after"></span>')
    	);/*this is IE speck for make a span with class="after", only IE understands this but then again only IE needed it. CONVENIENT*/
    Simple. No HACKS.. kinda.

    What I am saying is, if you used clearfix, and chose to remove it from your CSS stylesheets. you should have anything to remove from your HTML ( except maybe, class="clearfix")

    But you will need some OTHER WAY to clear floats to apply to containers.


    ENTER PAUL OB and {overflow:hidden;}...

    One attribute to add, works on ALL browsers!! WOW Paul, way to overachieve!

    The onlly issue I was mentioning with this, if that you need content to overflow, let say in the case of a drop down menu... for example. OVERFlOW:HIDDEN will hide anything that would otherwise textend past the container... ( your drop downs will be cut off.. ouch!!)

    you you must adapt for those occasions:

    The way I do it to use: display: table; instead of overflow: hidden; ( if I dont need to AP any direct children of the container , for example in a logo)
    or if I do THEN I go back and used my modified version of CLEARFIX. Think of it as a handy last resort.

  15. #15
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,756
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by dresden_phoenix View Post
    breeeeeeeathe.
    Trying.



    But you will need some OTHER WAY to clear floats to apply to containers.


    ENTER PAUL OB and {overflow:hidden;}...

    One attribute to add, works on ALL browsers!! WOW Paul, way to overachieve!
    I don't follow where to add that one line?

    And are you *sure* that one line does everything that the standard 20 lines of ClearFix do?


    I read a couple of threads on this topic, but am unsure which one is the most current and works for all current and past browsers.

    You make it sound like one fixes everything?!


    Debbie

  16. #16
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,097
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by DoubleDee View Post
    where to add that one line?
    On the same element to which you'd apply clearfix. So, if you want a container to wrap around its floated innerds, use

    Code:
    .container {overflow: hidden;}
    And are you *sure* that one line does everything that the standard 20 lines of ClearFix do?
    Yes. Its one downside, as d_p said, is that if you want some element to hang out of the container (like a fancy logo with a negative left margin, for example), it will get cut off, but that's fairly rare.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  17. #17
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,791
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    Exactly, ralph.

    And that's what I meant there is no substitute for observation and thought.
    f you want some element to hang out of the container (like a fancy logo with a negative left margin, for example), it will get cut off, but that's fairly rare.
    On THOSE rare occasions a clear fix type solution may come in handy. or perhaps a "display:table" OR you may realize you have an available element to which you can apply {clear:both} in which case you DONT NEED ANY of these clearing solutions anyway.


  18. #18
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,272
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    I'll jump in now and confuse the issue some more

    The magic of overflow (other than visible) is that it creates a new block formatting context and then the element must take care precisely of all its children and take them all under its wings. This is why overflow:hidden makes the parent encompass the children but this is not the only property that will do that. Absolute elements will encompass their floated children as will floats and elements that are inline-block or display:table. The full list is of properties that create new block formatting contexts are listed here.

    Which property you use is depends n circumstance as all have side effects with overflow:hidden being the best when you don't need visible overflow and when you don't want content cropped as in a fluid layout.

    In my original example that you based your code on I used the clearfix method because of the sticky footer routine where opera and ie8 didn't like overflow:hidden being used and also the fact that you may have wanted visible overflow.

    As many have said above you don't need to actually add the clearfix class to the html but you can apply the rules directly to the elements that need it. However for beginners its easy to code it once and then just add the clearfix class to elements that need it.

    There is no one silver bullet for clearing floats and there is no best method. You use whatever method suits the dynamics of the job in hand.

  19. #19
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Debbie, please take no offence, but you over think things. I know this because I do too. But with CSS this causes problems. I at one time also thought there was a best and one correct way to do things. But with CSS 9 times out of 10 there are quite literally ten ways to do the same thing. Sometimes there is a preferred way. But often times, as with this, there is only preference. There are numerous ways to contain floats and none work in all situations (I would imagine). So it simply boils down to whichever method you prefer. I've used them all depending on my mood and the situation. Here are all the available methods to contain floats http://www.visibilityinherit.com/cod...ain-floats.php. Pick one and run with it.

  20. #20
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,097
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by EricWatson View Post
    Here are all the available methods to contain floats http://www.visibilityinherit.com/cod...ain-floats.php.
    I notice Paul mentioned display: inline-block above too. Might be worth adding that to your handy list, Eric.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  21. #21
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,756
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by EricWatson View Post
    Debbie, please take no offence, but you over think things.
    It's part of my personality. (I know I do...)


    I know this because I do too. But with CSS this causes problems. I at one time also thought there was a best and one correct way to do things. But with CSS 9 times out of 10 there are quite literally ten ways to do the same thing. Sometimes there is a preferred way. But often times, as with this, there is only preference. There are numerous ways to contain floats and none work in all situations (I would imagine). So it simply boils down to whichever method you prefer. I've used them all depending on my mood and the situation. Here are all the available methods to contain floats http://www.visibilityinherit.com/cod...ain-floats.php. Pick one and run with it.
    My big hangup/FEAR is that you have to program one page 9 different ways to get the damn thing working on all modern browsers...

    How ****ed up is it to have to do one thing 9 different ways to make it work for the viewing audience?!

    I don't know how people like Paul O' stays ahead of the curve...


    Debbie

  22. #22
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,791
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    My big hangup/FEAR is that you have to program one page 9 different ways to get the damn thing working on all modern browsers...
    Yeah, it's kinda annoying to have to tweak for browsers comp. But it's really not that bad once you get the hang of coding compliantly.

    The thing is you have to think of the "9 different ways" each time you code and THEN select the ONE that appropriate for THAT particular INSTANCE.

    In essence , this is why when some one comes to a forum and ask something seemingly "simple" ... "how do I make a drop down menu." They will inevitably get asked "post your code .. and what have you done so far and what do you intend to do after." You don.t just code a menu you access a situation. The Zen of CSS is thinking "flow" rather than point.

  23. #23
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    See Debbie I over think too. Its my curse. Admittedly I'm pretty rusty again. For the last 6 months I've only been recoding 400+ table based pages into css on my biz site. A freaken pain in the butt. I'm adding inline-block to my contain floats demo page. From my ever increasing rusting memory... So ie7/6 dont do inline-block on default block elements without the inline and haslayout hack. Default inline elements only need haslayout. Correct? So this bit of code has me confused some. The div container is given linline-block and no haslayout per below code. Although ie6/7 contain its nested float. Just another trick of inline-block? Or am I rustier than I thought?

    EDIT: ahh ok I think I answered my own question. inline-block itself is giving ie6/7 haslayout. Thats probably it.

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title></title>
    <style type="text/css">
    <!--
    /* -------------- rules for everything ------------- */
    * {
    margin:0;
    padding:0;
    }
    html, body {
    height:100%;
    background:#333;
    }
    p {
    font-size:1.1em;
    }
    h1 {
    font-size:1.4em;
    margin:1.5em 0 1.5em 40px;
    }
    h2 {
    font-size:1.1em;
    font-weight:normal;
    position:absolute;
    bottom:0;
    right:0;
    padding:2px 5px;
    background:#E8E8E8;
    border-top:1px solid #000;
    border-left:1px solid #000;
    }
    #wrapper {
    background:#666;
    min-height:100%;
    width:760px;
    margin:0 auto;
    border:1px solid #000;
    }
    * html #wrapper {
    height:100%;
    position:relative;
    }
    /* ------------------- Method #6 ------------------- */
    #container {
    display:inline-block;
    padding:30px;
    background:#999;
    position:relative;
    border:1px solid #000;
    }
    #float {
    float:left;
    height:120px;
    width:400px;
    background:#ccc;
    border:1px solid #000;
    padding:20px;
    position:relative;
    }
    -->
    </style>
    </head>
    <body>

    <div id="wrapper">

    <h1>Method #6: inline-block</h1>
    <div id="container">
    <div id="float">
    <p>inline-block container</p>
    <h2>Float</h2>
    </div>
    <h2>Container</h2>
    </div>

    </div>
    </body>
    </html>

  24. #24
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,272
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by EricWatson View Post
    See Debbie I over think too. Its my curse. Admittedly I'm pretty rusty again. For the last 6 months I've only been recoding 400+ table based pages into css on my biz site. A freaken pain in the butt. I'm adding inline-block to my contain floats demo page. From my ever increasing rusting memory... So ie7/6 dont do inline-block on default block elements without the inline and haslayout hack. Default inline elements only need haslayout. Correct? So this bit of code has me confused some. The div container is given linline-block and no haslayout per below code. Although ie6/7 contain its nested float. Just another trick of inline-block? Or am I rustier than I thought?

    EDIT: ahh ok I think I answered my own question. inline-block itself is giving ie6/7 haslayout. Thats probably it.
    Yes you answered your own question as far as IE6/7 goes and inline-block causes haslayout to be true for both inline and block elements (unlike height or width which is only a haslayout trigger for elements that understand width and height i.e. block elements)

    Even though inline-block doesn't work on block elements in the way that it should it still applies haslayout to the element. If you then set the element to display:inline in another rule it still retains haslayout and then an inline element in haslayout mode behaves like inline block. This is probably a throw back to ie5 where inline elements could have both height and width applied without doing anything.

    For good browsers inline-block sets a new block formatting context (in the same way that floats and overflow other than visible do as I mentioned above) and is the real reason that the element will then enclose its floated children.

  25. #25
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Thank you for explaining Paul Well cool then. Unless I'm mistaken that puts inline-block right up there with overflow hidden as a simple float container then.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •