Can I avoid float elements shifting when I resize my browser?

Question

I am new to the world of coding as well as CSS and have noticed that when I resize my browser, all my float elements move to say the right and the user is forced to scroll horizontally to view say the menu.

Firstly is there a need to prevent float elements not changing their position?

Secondly, is there a way I can avoid this if I should be preventing it?

Answer 1

Floats are a pain in the butt. Primarily because of the one browser that refuses to follow the universal web standards. Yeah, that one.

There are a million and one tricks to avoid these problems. I tell my team to follow these steps:

1. Use absolutely positioned elements sparingly. If you position based on another element, things can "auto-adjust" but not so much when things are mathematically glued to one spot. They have their place, just not on every element on a page.
2. Consider a "reset" or grid-based CSS layout. I personally prefer 960 Grids They take the guesswork out of the various different browsers. Will IE push your padding out? Will the IE-specific padding be too much or too little with Firefox? With a reset and/or a grid, it's not as big a deal.
3. When doing percentages (which I personally really like) remember that browser generally don't use math where 1 + 1 = 2. That is to say, if you have a 1000 pixel space and you do two 50% columns side by side, chances are very good one is going to push itself below the other. Why? Because floats, margins, borders, etc. add up, and all differently in different browsers. So, think that.9 +.9 = 2 when you design. Does it work all the time? Nope. But it's a start.
4. Test, test, test. Things like browsershots, Adobe Browser Labs, etc are your friend. Use them constantly to ensure you're putting out good quality code that looks consistent across all platforms.
5. Keep it simple. You might be working on a project that dictates 100 different style sheets covering every single version of every browser. Most of us work on real-world projects with real-world budgets...that means you have to deploy quickly and efficiently. Use good quality w3 compliant code and quality CSS and you can completely avoid hacks.

Answer 2

I'd suggest you figure out if you want to support differing resolutions, depending on your target audience. Elements moving around isn't necessarily a bad thing, and planning in advance how you want your site to layout depending on viewport size could be important.

If you can't find a fixed-width, "one layout to rule them all" that works for your needs, take a look at CSS media queries . For a more practical article on them, try A List Apart

The basic idea is that, using separate stylesheets that depend on size, you can basically display a different layout to the user depending on their viewport. Users resizing their browsers will be able to see the new layout dynamically as well.