Fluid CSS Page Layout with a Border and Round Corners

June 7th, 2007 by Steve

Recently I was working on a table based site, with the entire page surrounded by a 1 px border with round corners. There were numerous table cells, spacer gifs, and four seperate images to use in the corners. Also, it didn’t take much to break it, which put a little space between a corner and a border.
I came across a great way to achieve the same effect using one small gif image and a few lines of style sheet code at the Developers Corner web site. By converting the layout using their “liquid corners” method, I was able to shorten the html files by almost 40 lines of code.
The resulting page layout is fluid (expandable), requires no tables or javascript, works in all browsers with one style sheet and no browser tests, and is very easy to use and customize. Check out my results here: http://www.tshaonline.com/

Posted in , | No Comments »

Leave a Comment

Please note: Comment moderation is enabled and may delay your comment. There is no need to resubmit your comment.