Will someone share examples of "float" in action?

I still just don't quite get it......

[stuntdubl]

Hey guys and gals,

I've been lurking around here for quite a while, and trying not to ask to many dumb questions, but I still cannot wrap my brain around how to use embedded divs and float.

I am trying very hard to get away from tables, but it seems there is always a couple things per site I do that trip me up, and I break down and use them.

I tend to learn better by example, so I was hoping that people could share some examples of using float, and/or sites that use divs as one would normally use tables.

Thanks in advance.

[drbrain]

Here's an example of floats and clear. These aren't (entirely) my real colors. Just for illustration.

I use the 'boxpunch' effect illustrated by Eric Meyer like this:

body { background: aqua }

.item { margin: 2em; border: 2px solid red; background: yellow }
/* draw a box around each 'item' */

.itemdate { float: left }
/* float the date to the left side of the .itemtitle, makes things a bit more compact */

h2 { z-index: 1; float: right; margin: -3px -3px 0 0; border: 2px solid red; border-top-color: transparent; border-right-color: transparent; background: aqua }
/* the h2 is floated right, and positioned one level above its parent. It is then moved so it overlaps the top and right borders of the .item, and given the background-color of the body, so it looks cut out of the content of the .item */

p { clear: both }
/* make sure that any paragraphs are forced below the .itemheader, so we don't have to worry about the first line being indented */

<div class="item">
<div class="itemtitle">
<h2 class="itemheader">Title</h2>
<div class="itemdate">20030618</div>
</div>
<p>Text text text...
<p>Text text text...
</div>

[MWpro]

I see float as a command that moves something off to the side so that other things, like text, can wrap around it.

Example number one:

.fl {
float: left;
margin: 5px'
}

<img src="name.gif" class="fl" alt="" />
Then you just put some text here, and the effect should be the image positioned on the left side with the text wrapping around it on the right side and then on the bottom.

Example of a two column site layout:

body {
margin: 0;
padding: 0;
}
#menu {
float: left;
width: 150px;
background: #CCC;
color: #000;
}
#content {
margin: 0px 0px 0px 150px;
font: /*stuff can go here if you'd like, all depends on how you like to style your fonts*/;
}

<div id="menu">
<ul>
<li>Link one</li>
<li>Link two</li>
<li>Link three</li>
</ul>
</div>
<div id="content">
<p>
Main content goes here. I like to wrap paragraphs in p's. Just using a lot of text so you can see how the margin on the content div prevents the text from wrapping under the menu.
</p>
</div>

Not too hard right? You may ask how you get the menu background to extend the length of the site, and you will be told many workarounds. I find the easiest way to do this is just to make a background image, 150px by 1px in this case, of the menu color and just set it as the background like this:
background: #FFF url("menubg.gif") repeat-y;
/*The #FFF is the color of the main content.*/
The other workaround is setting the background color of the menu to the body background and then just setting the background of the content to white.

Hope it helped a little bit, ask questions if you would like.

[drbrain]

Here's another one. On one of our sites we had a table something like (I don't exactly recall) this:

<table>
<tr>
<td>Search form
<td align=left>Site name
<td align=right>Account management links
</table>

Instead, I changed it to:

#search { vertical-align: middle; text-align: center }
/* make the site name live in the middle of the document */
#search .left { float: left }
/* put the search form on the left */
#search .right { float: right; text-align: right }
/* put the account management links on the right */

<div id="search">
<div class="left">Search form</div>
<div class="right">Account links</div>
<div>Site name</div>
</div>

[stuntdubl]

Very nice. I'm trying very hard to wrap my brain around css, and getting better slowly.

As stupid as it sounds the meaning of "cascading" is just starting to dawn on me. CSS seems so basic at times, but to create beautiful designs it can be so extraordinarily complex.

A few questions here......
<aside>I really hope you guys bear with all my questions....that's why I love WW so much....only hope I can give back as much as I've taken one day)</aside>

Firstly, I know that most css fans advocate complete handcoding, but while I CAN hand code html, and I have a strong understanding of how it works, I still find it easier to use an editor. Has anyone used any editors, and would you advocate their use? I would like to mention one in particular, but I believe it is against forum TOS, so please sticky me if this is the case.

Secondly,
I've been trying to "study" at the css zengarden, and I notice that many of the sites overlay images on top of their h1's in some fashion. Could someone explain a bit how this is done, and if it is legitimate in the eyes of google?

Thanks in advance (and in retrospect) for all the wonderful replies.