CSS trick for doing unlimited number of columns on a page without using tables
This site provides a cool idea on how to do multiple column layouts using purely CSS, no tables involved. They claim that it can be used to create an unlimited number, and they show four columns.
Basically, what they are doing is creating divs that are absolutely positioned. Then, instead of trying to float the divs, they set the 'left' and 'width' parameters as percentages. As you move to the right across the screen, the 'left' parameter for the next column is the 'left' value from the previous column, plus the 'width' from the previous column, as well as any margin that you want between the two columns.
This is actually a pretty cool idea since it avoids floating the divs (which always seems to mess me up). You could even put all of these divs inside another wrapping div to ensure that they line up vertically.
Basically, what they are doing is creating divs that are absolutely positioned. Then, instead of trying to float the divs, they set the 'left' and 'width' parameters as percentages. As you move to the right across the screen, the 'left' parameter for the next column is the 'left' value from the previous column, plus the 'width' from the previous column, as well as any margin that you want between the two columns.
This is actually a pretty cool idea since it avoids floating the divs (which always seems to mess me up). You could even put all of these divs inside another wrapping div to ensure that they line up vertically.
| Link: | glish.com...Search for more tips related to this link |
| Rating: | 100% positive, 2 total Votes |
| Categories: | CSS web 2.0 web design |
| Added: | on Mar 19, 2007 at 7:45 pm |
| Added By: | messy-me |

