How/when do I use "clear"?

Donny Bahama · #1 Apr 11th, 2007, 19:14

Can someone help me to better understand how (and where/when) to use "clear"? I'm reworking my message board code (again - to eliminate the table wrapper) and I know I'm going to need to use "clear". I could probably get it working via trial and error, but that would just be luck and perseverance - I'd rather own the knowledge.

Here's a mockup of what I'm doing, but if it's not clear, please refer to the attached screenshot.

Code: Select all

1-----------------------------------------------+
|               top frame (image)               |
+-----------------------------------------------+
2-+ 3--------------+ 4----------------------+ 5-+
| | |  [posted by] | | [said-to]            | | |
|s| | +----------+ | | +------------------+ | |s|
|i| | |          | | | |                  | | |i|
|d| | |          | | | |                  | | |d|
|e| | |          | | | |   message text   | | |e|
| | | | photo of | | | |      and/or      | | | |
|f| | |  poster  | | | |     attached     | | |f|
|r| | |          | | | |       photo      | | |r|
|a| | |          | | | |     thumbnail    | | |a|
|m| | |          | | | |                  | | |m|
|e| | +----------+ | | +------------------+ | |e|
| | |  [replybtn]  | |  [message controls]  | | |
+-+ +--------------+ +----------------------+ +-+
6-----------------------------------------------+
|             bottom frame (image)              |
+-----------------------------------------------+

I've numbered each div in its uppper left corner. All divs are floated left.
The wrapper div for all of this is positioned relative.
Divs 1 and 6 are exactly 472px wide, and divs 2-5 have their widths set so that they add up to 472px.
Divs 2 and 4 use a background image (repeat-y) to create the sides of the neon frame.
I'm guessing I'll need to use clear(:left?) on div 2, and clear(:right?) on div 5 and maybe even clear:both on div 1 and/or 6. But I'm not sure about any of that - and I certainly don't have a good understanding of how and why this works.

Lchad · #2 Apr 11th, 2007, 21:21

Let me give you a short answer. If this doesn't shed light on your problem, I'll be happy to look harder at your diagram! (wow.. can't believe you did that diagram)

Clear is used following a float.
If you float a div the next div will either need to be a clear div or another div that has the clear: both in it.

What happens is if you float something left, the next element wants to fill in the empty space to the right of that float. You actually in that case would only need clear: left (I think*) but most everyone uses both to be safe.

Donny Bahama · #3 Apr 11th, 2007, 22:55

Thanks for the help. OK, that makes sense. (I suppose it does shed light on my problem, but it sure doesn't make my code work!)

So, what's the difference between using floats and clears vs. display:inline/block?

Lchad · #4 Apr 11th, 2007, 23:12

This is word for word from my book!
Display:

Quote:

Display determines the kind of box used to display a page element. Block-level or inline.
Use it to override how a browser usually displays a particular element. Block- forces a link break above and below an element. Inline-causes an element to display on the same line as surrounding elements

Float:

Quote:

Float moves an element to the left or right edge of the browsers window or to the edge of the containing element. Elements that apear after the floated element move up to fill the space to the right (for left floats) or left(for right floats) and then wrap around the floated element.

I'll go one step further
Clear:

Quote:

Prevents an element from wrapping around a floated element. Instead the cleared element drops below the bottom of the floated element. Left means element can't wrap around left-floated elements. Opposite for right. Both clears left and right.

moojoo · #5 Apr 11th, 2007, 23:16

Generally a clear is used to keep a footer and/or the bottom of a container below floated elemnts regardless of height differences.

Code: Select all

.clearing {
height:1px;
margin:0 0 -1px 0;
clear:both;
overflow:hidden;
}

Donny Bahama · #6 Apr 12th, 2007, 01:30

I really appreciate all the help!

Quote:

Originally Posted by Lchad

Prevents an element from wrapping around a floated element. Instead the cleared element drops below the bottom of the floated element. Left means element can't wrap around left-floated elements. Opposite for right. Both clears left and right.

OK... when I first read that, I read it to mean that...

Assuming I want to stack 2 divs (DivA and DivB) side-by-side, using float:left...
If I use clear:left on DivB, that doesn't mean that it will line up below DivA - it will still line up to the right of DivA - it just won't wrap below DivA.

But that's not right, is it? My own testing disproves that. I tried adding display:inline to DivA, but DivB still lined up below (rather than beside) DivA.
But if I use float:left on both and don't use clear on either, DivA doesn't extend to 100% of the height of the container div - which I need it to do (its selector has a background image property with repeat-y.) I should probably add that I can't specify an exact height for the divs with the bgimage, because the message text element (not shown - it's part of the "I'll do this later" section!) will vary in height.

I can't figure out how to make this work - with any combination of float/display/clear. I'm attaching a screenshot for further clarification and I'll post my code. I hope someone can help me figure out what I'm doing wrong here. It's making me :crazy: !

Code: Select all

    <div class="em_msgblock">
        <img class="em_msgframe_top" src="img/neonframe-pink-top.gif" height="18" width="472" />
        <div class="em_msgframe_left"><img src="img/clr.gif" width="18" /></div>
        <div class="em_post_wrap">
            <p class="em_posttime">on Friday, March 30, 2007 at 4:38 PM</p>
            <div class="em_poster">
                <p class="em_postedby">Chuck Ferris</p>
                <img class="em_avatar" src="img/yearbook/1109-150-195.jpg" width="120" alt="" />
                <p class="em_location">Schaumburg, IL</p>
                <a href="e-medley_admin.php?ignore=1109"><img class="em_ignorebtn" src="img/ignore.gif" alt="Ignore (hide) all messages from this person" /></a>&nbsp;
                <a href="e-medley_admin.php?reply=1"><img class="em_replybtn" src="img/reply.gif" alt="Reply" /></a>
            </div>
            <div class="em_postedmsg">
                <p>I'll add the code for this block later!</p>
            </div>
        </div>
        <div class="em_msgframe_right"><img src="img/clr.gif" width="18" /></div>
        <img class="em_msgframe_bottom" src="img/neonframe-pink-bottom.gif" height="18" width="472" />
    </div>

And here's the CSS:

Code: Select all

.em_msgblock {
    position:relative;
    width:472px;
}

.em_msgframe_top, .em_msgframe_bottom {
    float:left;
    clear:both;
}

.em_msgframe_left,
.em_msgframe_left_alt,
.em_msgframe_right,
.em_msgframe_right_alt {
    float:left;
    width:18px;
    height:100%;
    background:url(img/neonframe-pink-side.gif) repeat-y;
}

.em_msgframe_left_alt,
.em_msgframe_right_alt {
    background:url(img/neonframe-orange-side.gif) repeat-y;
}

.em_post_wrap {
    float:left;
    width:436px;
/*    border: 1px dotted red;    */
}

.em_posttime {
    display: block;
    text-align:left;
    font-variant:small-caps;
    font-weight:bold;
    font-size: 0.9em;
    margin-left: 10px;
}

.em_poster {
    float:left;
    display:inline;
    width:124px;
    margin:5px 10px 10px 10px;
    font-weight:bold;
    text-align:center;
/*    border: 1px dotted blue;    */
}

.em_ignorebtn,
.em_replybtn {
    display:inline;
}

.em_avatar {
    border: 2px solid black;
    display:block;
}

.em_postedby {
    font-size: 1em;
    padding:5px;
}

.em_location {
    font-size: 0.85em;
    padding:5px;
}

.em_postedmsg {
    float:left;
    width:282px;
    margin:5px 5px 5px 0;
/*    border:1px dotted green;    */
}

BGarner · #7 Apr 12th, 2007, 02:02

Quote:

Assuming I want to stack 2 divs (DivA and DivB) side-by-side, using float:left...
If I use clear:left on DivB, that doesn't mean that it will line up below DivA - it will still line up to the right of DivA - it just won't wrap below DivA.

That's exactly correct! I'm not sure what you're doing to disprove that. Let's take an extremely simple example...

Code: Select all

div#header {
  width: 100%;
}
 
div#wrapper {
  width: 100%;
}
 
div#divA {
  float: left;
  margin-left: 5%;
  width: 30%;
}
 
div#divB {
  float: left;
  margin-left: 5%; 
  width: 60%;
}
 
div#footer {
  clear: both;
  width: 100%;

Quote:

DivA doesn't extend to 100% of the height of the container div - which I need it to do (its selector has a background image property with repeat-y.)

Have you tried adding "height: 100%;" to divA?

In my example the only time you should ever need to "clear: both;" will be in the footer.

"display: inline;" should be used on list items when they need to be displayed horizontally, not when floating columns.

The default display attribute should be fine. I don't think you need to have display in your CSS.

Hope this helped!

Donny Bahama · #8 Apr 12th, 2007, 04:06

Quote:

Originally Posted by BGarner

That's exactly correct!

Then what about "Prevents an element from wrapping around a floated element. Instead the cleared element drops below the bottom of the floated element."

Quote:

I'm not sure what you're doing to disprove that.

I added clear:left to the selector for DivB! It then displayed below DivA! I'll try a super-basic sample using your code. Thanks!

Quote:

Have you tried adding "height: 100%;" to divA?

Yep. It's there:

Code: Select all

.em_msgframe_left,
.em_msgframe_left_alt,
.em_msgframe_right,
.em_msgframe_right_alt {
    float:left;
    width:18px;
    height:100%;
    background:url(img/neonframe-pink-side.gif) repeat-y;
}

Donny Bahama · #9 Apr 12th, 2007, 04:40

OK, BGarner, I tried your code and it worked. (Mostly.) The difference is, I was putting clear:left in DivB's selector - you put it under #DivA.

That made a big difference, and the divs stacked (side-by-side) as I wanted.

However... Once I populated DivB with a fair amount of 'lorem ipsum', DivA did not extend to the bottom of DivB - even with 'height:100%'. (I added a dotted border, using a different color for each div, so I could see what was doing what.) Also, the wrapper div did not extend to the bottom of DivB - until I put in an empty div with a class selector with a clear:both property. (This was placed just before the closing </div> tag of the wrapper div.)

If I was able to bring the wrapper down below DivB using a clearing div, there ought to be some way of doing the same with DivA. Hmmm...

Donny Bahama · #10 Apr 12th, 2007, 05:08

Oh. I get it. I'm in css-equal-column-height hell (thanks to IE.) Looks like it's back to a table wrapper for me.

Lchad · #11 Apr 12th, 2007, 10:48

You got it Donny! That's where the faux columns comes into play. Back to the wrapper and throw in your two uneven columns!

You are a good student! hahaha

Donny Bahama · #12 Apr 12th, 2007, 15:14

Quote:

Originally Posted by Lchad

You are a good student! hahaha

Gee, thanks!

And the most valuable lesson I learned: When you have something that's working perfectly well, save it aside along with the stylesheet before you start mucking with it! :swear: Why do I always have to learn lessons the hard way?

Lchad · #13 Apr 12th, 2007, 15:17

If it makes you feel better, I've only learned things the hard way too!!!:lolabove:

moojoo · #14 Apr 12th, 2007, 17:34

CSSEdit has MIlestones =). Handy for tweakage and no need to save multiple files/copies.

BGarner · #15 Apr 13th, 2007, 01:37

I'm glad you worked that out.

I don't know of one person who has not had to learn something the hard way. It's like initiation in the web design world. Welcome to the club! (We have jackets!)

Donny Bahama · #16 Apr 13th, 2007, 02:06

Quote:

Originally Posted by Lchad

If it makes you feel better, I've only learned things the hard way too!!!

Well, the good news is, those are the lessons that really tend to stick!

Quote:

Originally Posted by moojoo

CSSEdit has MIlestones =). Handy for tweakage and no need to save multiple files/copies.

Sounds interesting, but I don't have a Mac. Still, my editor has a fairly robust macro language... I may just have to hack something together.

Quote:

Originally Posted by BGarner

Welcome to the club!

Really? Ya mean it?! I'm IN?!?!?! WOOT!

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
How/when do I use "clear"?