Hey guys, I am starting to get the hang of building sites using CSS (if it wasn't for cross browser problems id be a freaking expert by now ) but I was wondering about using positioning to layout a site rather than just laying out your divs in the order you want your content to appear. I pretty much never use positioning. What are the pro's and con's of using positioning over not using positioning (but using CSS still)? Is it better to use it? Is it something I should start using? Thanks, Jordan
I usually use floats to position everything where I want it and that works well for me and my grid based design. If I want something to appear outside the grid or floats wouldn't work I'll use absolute and relative positioning. Its worth learning, the great thing about CSS is there is more than one way to do something, and if you have all the tools, you can choose the right one(also the easiest one).
you *could* absolutely position everything, if you kept one thing in mind: force all text sizes to a set point size. different browsers have different default font/text sizes, and some users change the default sizes based on their preferences. if you position everything in absolute terms, there's a good chance that text will overflow some, most or all of your boxes. floating normal elements is a good way to get them to line up, especially if your text containing areas are defined in em or % (em is based on text size) instead of pixels. of course, floating also requires a bit of finesse, haggling, nesting and otherwise lots of practice to always get what you want out of it.
For a simple page, I use very little positioning-- mostly floats in menus. This is only if I know I will be doing very few changes with the layout, because I'm thinking of layout while I'm setting source order of a page. However for a page that is complicated or has different styles for different browser, I may position the hell out of a page-- especially if I'm using a floated sidebar after the main wrapper, floated left and wrapped up above with negative margins. On one page, I have two menus on most browsers and crazy positioning to turn them into one single menu in IE6. I also use a lot of CSS tooltips or fake image maps, and that requires a lot of absolute positioning (mostly off-screen). Imitating fixed positioning in IE6 also needs absolute positioning. You ask yourself these questions when considering positioning. Will the sidebar ever move to the other side of the page? Will I ever actually turn that sidebar into a footer (I've done that with CSS alone)? Does the boss want content first, or does the set-up have a bunch of BS or a long menu before the content? Positioning can take care of some of those issues, and skip links the rest. I have a footer on one page which is first in source, as it holds a short menu-- the only navigation menu, so I thought it would be better to be first rather than last in source. But visually it's at the bottom. And, lots of things get position: relative just for Haslayout reasons.