Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 18
  1. #1
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts

    Exclamation When and where to use clear floats

    The following code is complete as I have temporarily put the style sheet with the HTML. It is only for me to test out my CSS, and I know that it is very basic.

    I have used the float tag twice and I was wondering about the clear floats command.

    Is it relevent here and if so where would I put it, and why. Thanks for any help.

    effpeetee



    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
       
    <html>
    <head>
    
    <title>Enter_Title_Here</title>
    <meta name="generator" content="BestAddress HTML Editor Professional">
    <style type="text/css">
    
    body {
    	font-family: arial, helvetica, sans-serif;
    	font-size: 80%;
    	color: black;
    	background-color: #ffc;
    	margin: 1em;
    	padding: 0;
    }
    
    p {
    	line-height: 1.5em;
    }
    
    h1 {
    	color: #f00;
    	background-color: #0c0;
    	font-size: 4em;
    	margin: 0;	
    	padding: 0.25em;
    	font-style: normal;
    	text-align: center;
    	letter-spacing: 0.5em;
    	}
    
    h2 {
    	color: white;
    	background-color: #090;
    	font-size: 1.5em;
    	margin: 0;
    	padding: 0.1em;
    	padding-left: 1em;
          float:right;
    }
    
    h3 {
    	color: #0;
          background-color: #ccc;
    	font-size: 1.25em;
          float:left;
    }
    
    img {
    	border-style: dashed;
    	border-width: 2px;
    	border-color: #ccc;
    }
    
    a {
    	text-decoration: none;
    }
    
    strong {
    	font-style: italic;
    	text-transform: uppercase;
    }
    
    li {
    	color: #900;
    	font-style: italic;
    }
    
    table {
    	background-color: #ccc;
    }
    </style>
    </head>
    <body>
    <p><h1> This is a headline. </h1></p>
    <p><h2> This is a subheadline.</h2></p>
    <p><h3> and this is a sub, sub, headline!</h3></p>
    </body>
    </html>
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,676
    Thanks
    6
    Thanked 1,008 Times in 981 Posts
    clear is only necessary for elements coming after floated elements in the source code if you want them to continue under floated elements rather than them being affected by the float. For example, if you have a two column layout and one of the columns it floated to the left (making the other section go up next to that floated element, becoming the other column), and you had a footer that you always want to have/stay under the floated column you’d need to clear the float for that footer, otherwise it would just wander up next to the floated element, too, if there’s enough space.

    So in a nutshell: Since in your code nothing comes after the floated elements there is nothing to clear so no reason (and no element) to use clear there.

    The floatutorial might be interesting reading for you.

    And by the way: in CSS it’s called property, not tag.

  • #3
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Thanks a lot VIPStephan. Is the float property inherited? I find this side of css a bit difficult.

    Frank

    edit. And thanks for the URL.
    Last edited by effpeetee; 08-09-2007 at 03:59 PM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #4
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,676
    Thanks
    6
    Thanked 1,008 Times in 981 Posts
    Yeah, float and position are among the more advanced techniques – at least if you’re creating complex layouts with them.

    And no, they aren’t inherited. They only count for the elements you apply them to. However, clearing floats is another discipline as a clear within a floated element will only clear another float within that floated element whereas within a non-floated element it will clear floats outside that element, too. Hard to explain with a few words. I guess this will be discussed in the article.

  • #5
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Quote Originally Posted by VIPStephan View Post
    Yeah, float and position are among the more advanced techniques – at least if you’re creating complex layouts with them.

    And no, they aren’t inherited. They only count for the elements you apply them to. However, clearing floats is another discipline as a clear within a floated element will only clear another float within that floated element whereas within a non-floated element it will clear floats outside that element, too. Hard to explain with a few words. I guess this will be discussed in the article.
    Thanks again and also for the extensive help that you have given me with my website. I have tried not to spoil it too much.

    Frank
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #6
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts
    on a bit of a tangent, this will come in handy:

    Code:
    <div class="clear"></div>
    Code:
    .clear {
    clear:both;
    font-size:0;
    line-height:0px;
    }
    I find that this can help reset spacing / positioning issues that often creep up
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

  • #7
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Quote Originally Posted by canadianjameson View Post
    on a bit of a tangent, this will come in handy:

    Code:
    <div class="clear"></div>
    Code:
    .clear {
    clear:both;
    font-size:0;
    line-height:0px;
    }
    I find that this can help reset spacing / positioning issues that often creep up
    Thank you. All such info is useful to me. It is these seemingly small snippets that get one out of trouble.

    I have seven books on CSS and generally I find them confusing. Thank God for the CodingForum.

    [I wish though that some of them (only a few) would stop and reflect a little before making somebody feel small with a biting remark.]

    Sorry about that but I needed to get it off my chest. Your signature brought it to mind.

    effpeetee

  • #8
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts
    hehehe, not a problem.

    Some people see it as their right to rub their knowledge in others faces... don't take it personally, it is a sign of personal ineptitude on their part and in no way a reflection of fault on yours.

    Personally I find you intelligent and well spoken, so by all means continue to ask as many questions as needed. As those here can attest to, that is certainly my motto
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

  • #9
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,676
    Thanks
    6
    Thanked 1,008 Times in 981 Posts
    Quote Originally Posted by canadianjameson View Post
    on a bit of a tangent, this will come in handy:

    Code:
    <div class="clear"></div>
    …

    I find that this can help reset spacing / positioning issues that often creep up
    Well, not that I wanna rub my knowledge in anyone’s face but I feel an inner urge to point you to one of my previous posts (just yesterday) where I took a stand to avoid using empty elements. Floats can be cleared in better ways than adding an empty HTML element. For example if it’s the container that will be too short because a child is floated then float the container as well and the float is cleared (i.e. the container/box will surround the entire content), or apply overflow: hidden; to the parent and it has the same effect. No need for a meaningless empty element.

  • #10
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts
    too true.

    I suppose this is a workaround for those who don't quite understand all of the intricacies of CSS... like me

    this approach may however be useful for this post which I must admit I am at a loss for helping with
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

  • #11
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Back again.

    I have added another box but it will not center. I obviously have a long way to go yet with CSS. It's probably a mess but I have kept altering things willy-nilly, like a drowning man clutching at a straw.

    Anybody got a lifebelt?

    Frank


    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
       
    <html>
    <head>
    
    <title>seeessesstest</title>
    <meta name="generator" content="BestAddress HTML Editor Professional">
    <style type="text/css">
    
    body {
    	font-family: arial, helvetica, sans-serif;
    	font-size: 80%;
    	color: black;
    	background-color: #fff;
          width:1000px;
    	margin: 1em;
    	padding: 0;
    }
    
    p {
    	line-height: 1.5em;
    }
    
    h1 {
    	color: #f00;
    	background-color: #0c0;
    	font-size: 4em;
    	margin: 0;
          width:100%;	
    	padding: 0.25em;
    	font-style: normal;
    	text-align: center;
    	letter-spacing: 0.5em;
    	}
    
    h2 {  float:clear;
    	color: white;
    	background-color: #090;
    	font-size: 1.5em;
    	margin: 0;
    	padding: 0.1em;
    	padding-left: 1em;
          float:right;
    
    }
    
    h3 {  float:clear;
    	color: #0;
          background-color: #fff;
    	font-size: 1em;
          float:left;
          
    }
    
    h4 {  float:clear;
    	color: #ff0;
    	background-color: #0c0;
    	font-size: 2em;
    	margin: 0;	
    	width:50%;
    	font-style: normal;
    	text-align: center;
    	letter-spacing: 0.5em;
          float:center;
          
    	}
    
    img {
    	border-style: dashed;
    	border-width: 2px;
    	border-color: #ccc;
    }
    
    a {
    	text-decoration: none;
    }
    
    strong {
    	font-style: italic;
    	text-transform: uppercase;
    }
    
    li {
    	color: #900;
    	font-style: italic;
    }
    
    table {
    	background-color: #ccc;
    }
    </style>
    </head>
    <body>
    <p><h1> This is a headline. </h1></p>
    <p><h2> This is a subheadline.</h2></p>
    <p><h3> and this is a sub, sub, headline!</h3></p><br /><br />
    <p><h4> This is also a headline. </h4></p>
    </body>
    </html>
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #12
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts
    Code:
    h4 {  
    clear: both;
    	color: #ff0;
    	background-color: #0c0;
    	font-size: 2em;
    	margin: 0;	
    	width:50%;
    	font-style: normal;
    	text-align: center;
    	letter-spacing: 0.5em;
          margin-left: auto;
    	  margin-right: auto
          
    	}
    I recommend (and this is just my practice) that you put all of the 'global' things at the top of the CSS.. things that affect every element of a particular type (like a, img, etc).

    Just makes finding things easier
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

  • #13
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    That is very interesting. Is it usually better to use
    Code:
    margin-left: auto;
    	  margin-right: auto
    than float:center; or is this a special case?
    It seems to me that CSS is more of an Art than a Science.

    Thanks for the placement advice. I will do as you suggest. It makes good sense.

    Frank

  • #14
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts


    There's a very intricate and in-depth reason why float: center doesn't work...

    ready for it...



    it doesn't exist

    http://www.w3schools.com/css/pr_class_float.asp

    you can either float left or right, but not in the center (dunno why, it is weird...)

    i keep the w3schools bookmarked and on my links bar... i use it quite often

    (hehe, sorry for the sarcasm, i just figured it would be all in light-hearted fun)

    and yes, CSS really is an art... as art can be defined as the strategic and pleasing arrangement of objects on a given surface, which is exactly what CSS is
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

  • #15
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Sarcasm and light-hearted fun is fine by me CJ. Far too much PC in this stuffed shirt world.
    Joking aside, I really must start reading all the many books that I have bought on CSS.

    Doesn't exist! - I demand my money back.

    Frank
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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