/    Sign up×
Community /Pin to ProfileBookmark

Layout is perfect until floats added to content div

Copy linkTweet thisAlerts:
Mar 18.2008

The layout I have now works fine until I add floats in the #meat div. Basically, anything after the floats will get slotted underneath the menu on the left

I think I’m clearing the divs properly using the clearfix CSS class.

Here’s the working page:
[url]http://mygoaliestats.com/temp/index.html[/url]

As you can see, the “Align Issue” div is aligned after the menu due to the “Left” and “Right” floats above it.

Also, any comments on the layout technique used would be welcomed. It seems to work in IE6, IE7 and FF2.

to post a comment
CSS

7 Comments(s) ↴

Copy linkTweet thisAlerts:
@ray326Mar 18.2008 — I think you'll have to take the align issue out of the meat if you want it to go under the menu.
Copy linkTweet thisAlerts:
@DanDigiManauthorMar 18.2008 — I think you'll have to take the align issue out of the meat if you want it to go under the menu.[/QUOTE]

Actually, it needs to be in the #meat rather than the #menu. But in some cases, I need to float items in the #meat. Whenever I do that, I get the align issue.
Copy linkTweet thisAlerts:
@ray326Mar 18.2008 — I'm not following how that page demonstrates the problem.
Copy linkTweet thisAlerts:
@DanDigiManauthorMar 18.2008 — Problem:

The div with "align issue" should be immediately placed after both floated red/green boxes, and not aligned with the bottom of the menu div on the left. The border around both coloured boxes starts to show why the "align issue" gets aligned with the bottom edge of the menu.

If I get rid of the red/green floats, then the "align issue" div gets placed where it should, immediately after the "meat here" text.
Copy linkTweet thisAlerts:
@CentauriMar 19.2008 — This is due to haphazard use of the "clearfix" class without really understanding what it does - it is not a magic cureall for float clearing, and can cause more problems than it is worth. I much prefer to use whatever clearing method is warranted for each situation. The clearfix class adds extra content with clear:both set - as the menu div is floated, the clearfix class clears the menu, causing the box around the floats to be too big. Rather than use the clearfix class, simply styling the div surrounding the floats with overflow:hidden will solve the issue.
Copy linkTweet thisAlerts:
@DanDigiManauthorMar 19.2008 — Rather than use the clearfix class, simply styling the div surrounding the floats with overflow:hidden will solve the issue.[/QUOTE]

Cool trick. The only issue I see is that it doesn't work in IE 6.

I uploaded the fix you mention to the URL mentionned previously. The two divs overlap each other in IE6 - which, in my case, is usually solved by using the clearfix ? (but in this case it doesn't)

Does it work in IE7? I don't have it on my machine at the moment.
Copy linkTweet thisAlerts:
@CentauriMar 19.2008 — It doesn't work in IE6 due to that browser not doing things properly. IE6 will enclose floats if the container has "HasLayout" set, and this can be accomplished by setting a size (either height or width) to the container - if the conatiner does not include margins or padding, then 100% width works well as it does not worry other browsers. [COLOR="Blue"]zoom:1[/COLOR] also works, but is proprietory and therefore will not validate. [COLOR="Blue"]height:1%[/COLOR] also works in IE6, but this [B]must[/B] be hidden from other browsers.
×

Success!

Help @DanDigiMan spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...