...

View Full Version : When and where to use clear floats



effpeetee
08-09-2007, 03:40 PM
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.:D

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

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

effpeetee




<!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>

VIPStephan
08-09-2007, 03:52 PM
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 (http://css.maxdesign.com.au/floatutorial/) might be interesting reading for you.

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

effpeetee
08-09-2007, 03:56 PM
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.

VIPStephan
08-09-2007, 04:01 PM
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.

effpeetee
08-09-2007, 04:04 PM
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

canadianjameson
08-09-2007, 04:38 PM
on a bit of a tangent, this will come in handy:



<div class="clear"></div>



.clear {
clear:both;
font-size:0;
line-height:0px;
}


I find that this can help reset spacing / positioning issues that often creep up

effpeetee
08-09-2007, 04:51 PM
on a bit of a tangent, this will come in handy:



<div class="clear"></div>



.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

canadianjameson
08-09-2007, 04:56 PM
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 :)

VIPStephan
08-09-2007, 05:21 PM
on a bit of a tangent, this will come in handy:



<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 (http://codingforums.com/showpost.php?p=597721&postcount=5) (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.

canadianjameson
08-09-2007, 05:40 PM
too true.

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

this approach may however be useful for this (http://www.codingforums.com/showthread.php?p=598231) post which I must admit I am at a loss for helping with :)

effpeetee
08-09-2007, 06:36 PM
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.:eek:

Anybody got a lifebelt?:thumbsup:

Frank



<!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>

canadianjameson
08-09-2007, 07:54 PM
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

effpeetee
08-09-2007, 08:49 PM
That is very interesting. Is it usually better to use
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

canadianjameson
08-09-2007, 09:13 PM
:D

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

ready for it...

:D

it doesn't exist :p

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 :)

effpeetee
08-09-2007, 09:22 PM
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

canadianjameson
08-09-2007, 09:36 PM
hehehe, take to the streets clad in nay but billy-boots and a smile -- armed with the knowledge that you are right and they are wrong.... and nothing will stand in your way!

hehe, i also recommend a thorough trouncing of http://www.w3schools.com/css/default.asp as you will learn and be able to test out quite a lot there

Good luck to you on your merry journey through the realms of CSS

effpeetee
08-09-2007, 10:26 PM
Can you really imagine an eighty-two year old man clad like that. It really would be hilarious. World wars have started for less!

Caught Slightly Stripped.

I always wondered what it meant.

Ah well, off to bed. It's 2230hrs.

Be back tomorrow.

Frank

canadianjameson
08-09-2007, 10:42 PM
82 and learning to program a website... my dear man I think i have grandfather envy :p

Please feel free to post any questions that arise, and message me if there is any way in which I can help you.

Good night :)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum