User Name
Password
AppleNova Forums » Programmer's Nook »

CSS Positioning is Quirky


Register Members List Calendar Search FAQ Posting Guidelines
CSS Positioning is Quirky
Thread Tools
Kraetos
Lovable Bastard
 
Join Date: Dec 2005
Location: Boston-ish
 
2009-08-14, 11:44

This is less of "how do I?" question and more of a "why does this?" question.

More often than not, I've got five important divs when I make a CSS layout. Wrapper, header, content, sidebar, and footer. Wrapper usually serves to center the content and potentially provide it with a background color different than the page's background color. The rest are self-explanatory.

I was making a quick mockup today when I got frustrated because the background color for the wrapper wasn't extending all the way down the page. It was centering it's children divs just fine, but the background coloring didn't extend past the header. I tried adding a height/min-height: 100% property but no luck.

It's a problem I've had intermittently ever since I started using CSS and I've never been able to solve it and understand what I did to solve it. IIRC in the past I've usually just hacked around until I fixed it, tossed in a "here be dragons" comment, and gone on my merry way. So I figured I'd worry about it later and added background colors to the content and sidebar divs to compensate, and at some point in time I would probably stumble upon the fix like I usually do.

Thanks to CSSEdit's live preview, when I added the footer div, I noticed that it had the correct background color without giving it a background color manually. I removed the background colors from the other two divs and everything was fine—the wrapper was extending all the way down.

I thought this probably had something to do with the float property, so I removed it from the footer CSS and sure enough, the background color crept all the way back up to the header.

In a nutshell, I'm not sure what the float property is actually doing. I can play with it and after a while I normally get lucky and everything looks great, but I can't make it look right on the first pass.

What does clear actually do? How do things float relative to their parent? The preceding element?

Logic, logic, logic. Logic is the beginning of wisdom, Valeris, not the end.
  quote
Iago
Senior Member
 
Join Date: Jul 2009
Location: Hmm?
 
2009-08-14, 11:57

Min-height won't work with percentages. You're using floats for the content and sidebar, right? So you've got something a little like this:

Code:
#sidebar { width:20%; float:left; } #content { width:80%; float:right; }
If those two are contained within #wrapper, #wrapper will assume that they are floating above it, so it won't extend down. What you need to do is put #footer within #wrapper, too, and set clear:both on that. So basically it clears both the left and right float and appears below them.

So you should have something like:

Code:
<div id="wrapper"> <div id="sidebar"><p>This content is floating on the left.</p></div> <div id="content"><p>This content is floating on the right.</p></div> <div id="footer"><p>I'm just here to make sure everyone plays nice.</p></div> </div>
Make sense?
  quote
Kraetos
Lovable Bastard
 
Join Date: Dec 2005
Location: Boston-ish
 
2009-08-14, 12:25

So the float properties on the content and sidebar divs are what's causing them to exist outside of the wrapper div?

Why does CSS specify that a div, contained within a wrapper div, should exist outside of the wrapper div if it has a float property? That seems odd to me.

So clearing the float tells the browser that all preceding divs are to be treated as children of the wrapper div?

Logic, logic, logic. Logic is the beginning of wisdom, Valeris, not the end.
  quote
Unch
Member
 
Join Date: Jun 2005
Location: United Chavdom of Little Britain
 
2009-08-14, 12:32

The float removes the object from the flow. You need to "clear" the float with another object. Here is code ripped out of my own site.

Code:
<div id="main"> <div class="newsbox"> </div> <div class="boxout" style="width: 40%; clear: right; float:right;"> </div> <div class="boxout" style="width: 40%; clear: right; float:right;"> </div> </div> <div style="clear:both;">&nbsp;</div> </div>
if I didn't have the last div, the "boxout" divs would spill out of the "main" div

"It's like a new pair of underwear. At first it's constrictive, but after a while it becomes a part of you."
  quote
Iago
Senior Member
 
Join Date: Jul 2009
Location: Hmm?
 
2009-08-14, 12:38

Here you go boyo.
  quote
ast3r3x
25 chars of wasted space.
 
Join Date: May 2004
Send a message via AIM to ast3r3x  
2009-08-14, 15:04

Also, if you want a container to match the height of it's floated children, you can add float to it.

Trick 7 - if you put a clear on the containing div too, you don't have to worry at all about an extra element at all.
  quote
synotic
Member
 
Join Date: Jun 2004
 
2009-08-18, 01:09

I'm not as comfortable with this stuff as I used to be, but essentially, floating an element removes an element from the normal flow and it no longer contributes any content to its enclosing container.

So it's not so much that floated elements exist outside of their containers, but rather that they have the opportunity to spill out of them if there's not enough content. You'll notice that if you keep adding content to your body that the background will extend down. That's because your content still, presumably, isn't floated and contributes to the normal flow.

What makes floats particularly useful is that content in the normal flow exists alongside the floated content. This is what allows your body to coexist with your sidebar or your text with your floated image.

The problem is that this isn't necessarily always the behavior that you want. For your footer, for example, you don't want it to exist alongside your sidebar. So what you need to do cancel out or clear any existing floats so that your footer isn't bounded by any particular side. In order to do this, you set clear: left if your sidebar is on the left or vice-versa. Or, more conveniently, just clear: both.

In the case of a footer, you already have an element that can be conveniently used for clearing. In other instances, you might want the container to take the full height of its content (floated or not). In this case, you'll see people sticking a <div style="clear: both"></div> at the container. Depending on your existing styles, you might also see a lot of effort to prevent the clearer div from contributing any height: style="height: 0; line-height: 0; font-size: 0;" etc...

Then after a while that method became outdated and people started using more CSS-oriented hacks that didn't require you to muddy your markup. I'd tell you what I used to do, but looking around in Google, it looks like that, too, is also outdated . Your best bet if you want to be a hip CSS stylist is to look up "clearfix" and find the latest method.

--

Also, one of the best sites I know for learning about floats is Max Design's Floatutorial.
  quote
Posting Rules Navigation
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Post Reply

Forum Jump
Thread Tools
Similar Threads
Thread Thread Starter Forum Replies Last Post
iPhone: quirky ordering of phone numbers in Contacts apple007 Apple Products 1 2007-08-04 02:12
Forum Positioning Maciej Feedback 28 2005-12-10 15:14
Quirky things you do when nobody's watching... ShadowOfGed AppleOutsider 41 2005-11-15 19:00
View New Post Positioning _Ω_ Feedback 3 2004-08-28 00:14
CSS Positioning ast3r3x Genius Bar 20 2004-07-24 22:38


« Previous Thread | Next Thread »

All times are GMT -5. The time now is 04:54.


Powered by vBulletin®
Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.
Copyright ©2004 - 2024, AppleNova