I wanted to have some nice boxes around my content like I have done before but this time I didn’t want to use tables and cells but CSS as CSS is meant to be leaner, quicker to develop and removes the markup/layout from the content. So round one went to CSS since I was going to use it over tables.
I chose to use Description Lists (DL/DT/DD) elements as these suit my purposes and together with a DIV for the content provided me with ample elements to hang layout from should I need to. I also had my copy of Bulletproof Web Design handy to guide me along the way, it even has a chapter called “Indestructable Boxes” so I thought this would be an easy task.
I made my content sans any styling and look at it and thought it was good. So round two went to CSS since I was on my way to content without embedded styling and the content was ultra compact. I just had to add some styling and how hard could that be since everyone was doing it?
I added a base style sheet to set the font sizing and styles for the body of the page just like the book suggested and I imported this into the page which looked rather snazzy and sizing the font up and down worked too. Now I just had to add a style or two to get the box with the rounded edges that I wanted, one that sized correctly both horizontally and vertically.
I added another style sheet and imported that. This one added background elements and positioning to the DIV, DL, DT and DD elements. However, when I looked at my page it wasn’t the nice box I desired but something close, so I tweaked the CSS here and there to try and get what I wanted. After about an hour of frustration I turned back to the book to see if I had missed something. Round three went to Tables since I would have been done in under one hour.
The book uses a different set of elements to layout the content and then mark it up with styling so I thought I’ll just copy what the book did and then try and use the same results in my layout or in the wose case just use the books solution. To my surprise the books example didn’t look right either. Hmmmn. Round four to Tables.
I’m still not sure why my solution doesn’t appear correctly and suspect that it’s the sizing of the images. Attached are the files as they were when I left them after some frustration. Boxing with CSS files If you are able to see why they don’t work the way I expect then please send me an email.
This fight isn’t over yet since there are plenty of nice rounded boxes all over the web so it must be my technique !