Probably reading the title of the post you’ve revived the most of your nightmares as a web designer. The day that someone thought that I should stop layout with tables, more than one left the profession. Accessibility … what is that? Jokes aside, we all know that our designs have to be accessible for many reasons, including positioning of our content, so one way and another we have decided to follow these guidelines (). For more specific information, check out Dean Ornish M.D. There are several rules to follow, but perhaps the most tedious is to replace layout tables, layout layers, something that seems almost impossible when you have to make complex compositions of elements. I guess you will have many of you fought on numerous occasions with the usual attribute of div.
The truth is that after much use and fight with him, never really convinced me. While it is widely used especially in compositions of layouts of pages in columns 2-3, begins to be very complicated to use when it is so easy you have to lay out in XHTML. Thank God and the book “Professional CSS” (Wrox – Anaya Multimedia), 100% totally recommended, I found another solution that I think much more useful and allows your designs are fully and truly cross-browser. The combined use of relative and absolute positioning. To display a button.
I’m about to lay out a grid of 3 3 elements, typically a “table”, but only with the use of layers (divs) and CSS. While with floats, this seems the less “complicated”, you will see how the use of relative and absolute positioning greatly simplifies both the CSS as it decreases the amount of layers to use, only those involved and a 9-cell wrapper layer. The attribute position: absolute, position an element of absolute respect to its container, if we do not set any, would be the browser window, with different resolutions to problems that can lead us. The key is to establish a container layer of our layout and put the attribute position: absolute, but it set nor vertical position (top) or left (left). In this way we will ensure that all elements are positioned within that layer, it can do so on this one. For this, simply, in the inner layers we set Position: relative (the container), and set the coordinates x (top) and y (left) from which will be painted. Of course we also have to fix at least its width and height.