Geek Answers Handbook

Can I move float elements when resizing my browser?

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

Firstly, is there a need for float elements to not change their position?

Secondly, is there a way to avoid this if I should prevent it?

+4
source share
2 answers

Floats are pain in the butt. First of all, due to the fact that one browser refuses to follow universal web standards. Yes this.

There are a million and one trick to avoid these problems. I suggest my team to do the following:

  • Use absolutely positioned elements sparingly. If you position on the basis of another element, everything can "automatically adjust", but not so much when everything is mathematically glued to one place. They have their own place, but not on every element of the page.
  • Consider a CSS layout with reset or grid. I personally prefer the 960 Grids. They take guesses from different browsers. Will IE pop your pads? Will the IE-specific add-on be too much or too little with Firefox? With reset and / or mesh, this is not such a big deal.
  • When the percentages (which I personally like very much) remember that the browser does not use math at all, where 1 + 1 = 2. That is, if you have a space of 1000 pixels and you make two 50% of the column for bonuses, the chances are very good , he will push himself under another. What for? Because floats, fields, borders, etc. Add up, and everything is different in different browsers. So, think .9 +.9 = 2 when designing. Does he work all the time? Nope. But this is the beginning.
  • Test, test, test. Things like browsers, Adobe Browser Labs, etc. Are your friend. Use them all the time to make sure you release good quality code that looks consistent across all platforms.
  • Keep it simple. Perhaps you are working on a project that defines 100 different stylesheets spanning each version of each browser. Most of us are working on realistic projects with real budgets ... which means you need to deploy quickly and efficiently. Use high-quality w3-compatible code and CSS quality, and you can completely avoid hacks.
+9
source

I would advise you to find out if you want to support different permissions, depending on your target audience. Elements moving around are not necessarily bad, and planning ahead how you want your site to be mock-up based on the size of the viewport could be important.

If you can't find a fixed-width, one-layout-for-all layout that works for your needs, check out CSS multimedia queries . For a more practical article about them, try A List Apart

The basic idea is that by using separate style sheets that are size dependent, you can basically display a different layout for the user depending on their appearance. Users resizing their browsers will also be able to see the new layout dynamically.

+1
source

More articles:


All Articles