Yes, I know it’s a silly title, but when you are blogging on a Friday night you have to take a little creative license. I’ve been fooling around with using divs for page layout and I figured I’d capture my thoughts for you and me before I wiped the page and moved on with something else. Here are a few thoughts on divs and how they can be used
Putting divs next to one another is a common objective that you might want to pursue. Here is a simple example of how to accomplish this:
1 2 3 4 5 6 7 8 | <div id="mycontainer" class="container" style="float: left; width: 16em;"> <div class="leftnav"> Some Content </div> <div class="mainarea" style="clear: right;"> More Content </div> </div> |
The above example is trivial, but it easily demonstrates how you can go about positioning 2 divs side by side. This seems really simple, until you start filling them up with content. Then you realize that as one div expands vertically, the other one does not want to follow along and play nice. That’s because they size themselves independently. What bone head thought of that, right? There is a solution for this woe, but it takes a little Javascript love to make it work. Look at the example below.
1 2 3 4 5 6 7 8 9 10 | <head> <script type="text/javascript" src="../jquery/jquery.js"></script> <script type="text/javascript" src="../jquery/pxToEm.js"></script> <script type="text/javascript" src="../jquery/jquery.equalheights.js"></script> <script type="text/javascript"> $(document).ready (function () { $('#mycontainer').equalHeights () ; }) ; </script> </head> |
For those keeping score you will notice the inclusion of the jQuery Javascript library. jQuery is a base library that allows for very natural referencing of objects within the DOM. The plug-in that does the magic can be found here. Make sure you also get a copy of the pxToEm.js file which is also available on their site. The very short Javascript is essentially called in the jQuery document.ready method, checks which div inside the container div is the longest and then resizes the other divs within the container div the same height. The #mycontainer parameter reflects the addressing of container div by its id.
The “general” consensus these days seems to be that divs are the markup of choice for building organized web layouts in a fluid (I think the term the designers use is liquid) way. This is different from using a grid approach or from using tables to structure the site. I think the generally accepted wisdom would be that tables are good for tabular data, but not for web layouts.
If you ask me, and you won’t, I would say that divs in conjunction with CSS do create a great foundation for web sites and applications. Having said that, expect to spend a little time pulling your hair out (assuming you have hair) as you spend more time working with them. They are pretty easy to use, but they are also pretty easy to miss-use if you are not careful. Test often and enjoy the process of discovery.
Peace
