Why isn't my float floating?
Home / Web Technology / Why isn't my float floating?
Sorry if this is the wrong forum...
Oki guys I need some help before I go crazy here...
Basically I got a design yesterday 10am, that needs to be finished 9am tomorrow. So a real rush job. Then I'm gonna show it (in Firefox!) to some people who decide whether or not I get to go forward with this project (it's sort of a personal project, i'm interning at a city council and am doing a new web template for them). Don't even try opening this page in anything else but firefox
Right now it doesn't matter.
I haven'f finished the navigation - far from it. Some clearing issues going on there as well, but right now I'm focusing on the .content. (Also I know the search form doesnt validate, right now it's just there as a placeholder, I'll work on it later!).
Anyways.. my problem is this: The main content cosists of 3 "colums". A newsfeed, some "modules" and a "mediabar". They are all set to float. But the media bar is pushed down and doesnt float next to the other ones as it should. And I've been trying to figure out now but I'm just not thinking straight anymore.
News and modules are set to float left, media bar to float right (although it should have worked with float left as well).
In fact, if I take the float off the media bar, it displays the way I want to. But it should work by floating it damnit.!
here it is:
http://lindasandvik.info/...
Any insight would be much appreciated.
If they like it I get to go ahead and make it properly=) Also my apologies for the divitis in some of the elements... I really hate rush jobs.
Share: 
Try coloring in the columns red blue and green until you find the cause (trust me it will work). If you do not have columns then all the white container divs. Also colour in the container black.
Edit: I had a quick look and I ideally I would have created 3 columns and placed the boxes insie them. This makes the design more robust.
_________________
Johan De Silva / Portfolio | Place of Work @Flipside | Read my movie reviews punk!
Last edited by Johan007 on 05 Jun 2009 11:32 am; edited 1 time in total
Share:
why is the answer always "add another wrapper div"? 
Is there a theoretic reason why having the modules floated left and then the sidebar right would not work?
Share:
Moved from Site Building & Testing.
Linda,
Johan's advice on colouring backgrounds of various containers, elements, etc does work. It really helps you focus in on the problem. Trust me...I know from bitter experience!
_________________
Blogging at: AWTS (Accessible Web and Training Solutions)
Share:
The three things I normally investigate when there's a float bug:
- Clearing.
- Widths.
- Margins.
It's not immediately obvious what's causing this one, though!
Share:
Yes it's an awesome technique, particularily combined with firebug, but in this case it doesn't help me as I still can't see that anything is pushing the sidebar down.
There might be some clearing things doing it... ? But the space is there, it's small enough to fit in it, nothing else is occupying that space.
Share:
| Jordan Gray wrote: |
The three things I normally investigate when there's a float bug:
It's not immediately obvious what's causing this one, though! |
I think I've ruled out widths and margins, as the bar clearly does fit in that space. In fact, if I remove the float, it goes in there nicely like it's supposed to.
Share:
It really looks like a clearing problem—but Firebug hasn't backed this up, thus far!
Share:
Linda, I'm clutching at straws here! You have the following CSS for the right hand column:
| Code: |
| .mediaBar {
width:220px; float:right; display:inline; clear:none; } |
Have you tried:
| Code: |
| clear:right; |
[edit]Or how about:
| Code: |
| float:left; |
and give the column a margin-left value?[/edit]
Not sure if this is the problem and, anyway, you've probably already tried these solutions?
[/code]_________________
Blogging at: AWTS (Accessible Web and Training Solutions)
Share:
Yes, I am aware that removing the code that tells it to float does solve the problem (I've mentioned this two times).
But it shouldn't, should it? I mean, it should (in theory) work to have it floated?
EDIT: It should also work to have it floated left (in theory). But in my case it doesnt...
It also works if i put an empty wrapping div around the modules and float that left too. But I really don't like adding extra markup. I'm over-using divs as it is.
Share:
Sorry, I should have been more specific. I wasn't meaning that you should delete the existing code; just change clear to right and leave the rest of the code there. _________________
Blogging at: AWTS (Accessible Web and Training Solutions)
Share:
Oh, of course! 
It's so obvious now that I have some coffee in me. Indeed, I cannot berate myself enough for not spotting it instantly.
Linda, each of those modules is floated left. The reason that they stack one below the other is that they are too wide to fit two on a line. Right? So, when you float the media box to the right, it tries to squeeze into whatever space is left on the right-hand side—after all of the preceeding left-floated elements have "claimed their territory."
Or, in other words, each module box is thinking, "No room for me there, so I'll go down to the next line." And when it finally comes to your media box's turn, it looks for the rightmost place that it will fit into—but it cannot, under any circumstances, go any higher up than the element immediately before it!
In a nutshell, each module is pushed down because there isn't room on the previous line, so the media box ends up being pushed down to the level of the second-to-last box. The floats are working exactly as they're intended to (for once)—I was just too dull and tired to see it.
Your options are:
- Wrap the modules in a container div. (E.g. <div id="modules">.)
- Don't float the media section. This is perfectly legitimate, and in fact is my own preferred method since it involves no change to your HTML.
- Move the media box to be before the modules. This lets it claim its space on the right first, and the modules fill in the gaps after.
Hope that helps!
Share:
Incidentally, I'll share a little revelation with you that I had a couple of years back that made working with floats much easier. The short form is: floats are dumb.
The longer version: floated elements don't do anything clever to work out where to slot into a page. All they do is follow a few simple, usually predictable rules (browser quirks aside). In situations like this, you just need to take each float one at a time. Floats don't decide where to go based on any clever analysis of what gaps are left on the page. Absent positioning on the float or a container, they will never go higher than a previous sibling: they start by looking for space at the level of the immediately preceding sibling, and work their way down.
Once or twice I've caught myself humming, "floats are dumb, floats are dumb…" like a kind of mantra. It helps, believe it or not!
Share:
That actually makes sense. Thanks for explaining it to me! I man I realised not having the media bar floated did work, but I feel much better knowing why.
I thought because the modules had a width on them they shouldnt occupy that space.
I don't want to add more markup or change the order of things (modules are more important than the mediabar and should come first in a screen reader for example), so I guess I just don't float the mediabar.
Thanks for the help everyone=)
Share:
@Jordan.
Nice one! Here, have some chocolate to go with the coffee...
_________________
Blogging at: AWTS (Accessible Web and Training Solutions)
Share:
All times are GMT
You cannot post new topics in this forumYou cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum