ansaurus

Question

Answer 1

A:

You just need a clearing element below the <div class="tagPlaces"> for Breakfast:

<div class="tagPlaces">
    <h3><span id="ctl00_ContentPlaceHolder1_TagListView_ctrl2_TagName">Breakfast</span></h3>

    remaining div content
</div>
<div style="clear: both"></div>

Pat 2009-08-19 13:15:21

Rule of thumb: Don't add extra elements when you don't need to.

David Dorward 2009-08-19 13:17:36

But the parent of tagPlaces has clearfix applied to it. Shouldn't that do it, since I'm floating tagPlaces?

Kon 2009-08-19 13:17:37

I believe it's because the clearfix would need to be applied to every tagPlaces container, not just the parent. I tried doing that and had no luck with it. In my experience, an explicit clearing element is the most consistently displayed, especially by our "friends" in the IE browser family.

Pat 2009-08-19 16:07:13

Well, as much as I didn't want to do this, it seemed to be the only solution (short of using tables) that worked in FF and IE. Thanks, Pat.

Kon 2009-08-19 19:12:44

I can't count the number of times I've said that because of IE...

Pat 2009-08-19 20:03:28

Answer 2

+5 A:

Due to the combination of:

The bar group is floating
There is room beside the bar group for the BYOB group
The BYOB group is clear: none (the default)
The group between 'bar' and 'BYOB' is shorter than 'bar', leaving space under it but beside 'bar'

Set clear: left on every third group after the first (1,4,7,10,etc)

David Dorward 2009-08-19 13:16:19

I think you mean 4th group.

Joel Potter 2009-08-19 13:25:25

Hmm... that seems to be it! I'm just not quite sure why there is room for BYOB beside Bar? I guess this is related to variable heights? Because if I set height to 200px across all the groups, the problem goes away. I'll take it, but I won't be happy about it! :)

Kon 2009-08-19 13:26:41

@Joel No. Every third: #1 (although you don't need to), #4, #7, etc.

David Dorward 2009-08-19 13:27:51

@fallen888: Yes. Since Breakfast is shorter than Bar, there is space left beside Bar and under Breakfast.

David Dorward 2009-08-19 13:28:52

Spoke too soon... this is great in FF. But in IE7, Casual section now hugs the right side, instead of following immediately after BYOB in the middle.

Kon 2009-08-19 14:05:51

Same for IE6 and while I agree that less markup is definitely better, if you want IE support, you're stuck with the explicit clearing element. I added it after every 3rd group and it displayed fine in FF, IE, Opera and Safari.

Pat 2009-08-19 16:13:38

Though this didn't work in IE, I still feel that this is the ideal solution. So I up-voted. Thank, David.

Kon 2009-08-19 19:13:22

ansaurus

tags:

views:

answers:

Why isn't this wrapping as expected?

related questions