The Power of the DIV & other BLOCK elements

The DIV tag is one of my most hated and most loved tags in HTML.  It allows you to do so much, but at the same time, can cause some headaches when things aren't lining up, or because of their block nature, finding each new div on a new line.

This morning, Danny came into my office to ask how to make the ANCHOR tag maintain it's size, so that you can click on it whether you're on the text or not.  For example, the following anchor:

The entire blue background is clickable

To do that, we set the width on the control, but that by itself wasn't enough, you also need to add "display: block".  So the above hyperlink looks like:


a href="" target="_blank" style="width: 450px; display: block;background-color: Blue; color: White;">The entire blue background is clickable</a>

One of the other cool things I like about DIV's and block elements, is their ability to "contain" their size and information, so you get scroll bars in your page.  While this isn't a great example here, I'm using it on my fine art photography website [yes, it looks AWEFUL in FireFox, I need to fix that].  For example, you could have something like this box below:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec dolor velit, pulvinar in, sagittis non, volutpat sed, dolor. Cras in risus. Sed pede lacus, eleifend id, porttitor sit amet, fermentum faucibus, felis. Ut blandit, orci at laoreet malesuada, ante nulla elementum dui, vel molestie tellus tortor eu metus. Maecenas venenatis, lorem blandit tempus tempus, erat tellus ultricies purus, ut eleifend ipsum sem id erat. Sed aliquet, odio sed nonummy volutpat, ligula purus hendrerit lorem, ac pharetra dui est non magna. Morbi faucibus ante a ligula. Ut ac nisi vel velit imperdiet nonummy. Proin feugiat, nisl nec dapibus consequat, lacus augue placerat turpis, nec venenatis libero justo ut pede. Ut eget felis. Maecenas id lacus. Praesent nec elit tincidunt odio consequat elementum. Nulla dolor tellus, egestas vitae, hendrerit id, commodo quis, mi. Ut congue.

Pellentesque in elit. In porttitor, lorem non bibendum varius, libero nulla tempus sapien, vitae pretium neque metus faucibus odio. Nullam eleifend, quam non tincidunt molestie, ligula neque sagittis arcu, sit amet iaculis tellus dolor id lacus. Sed pretium neque a dui. Suspendisse purus felis, ullamcorper id, hendrerit vitae, nonummy non, velit. Nulla nisl. Nunc tellus dui, interdum ut, malesuada id, faucibus ac, sapien. Morbi felis nibh, rutrum a, dictum ac, volutpat quis, ipsum. In iaculis porttitor ante. Morbi sed arcu vel urna tincidunt suscipit. Duis interdum lacinia nibh. Nunc eleifend scelerisque mauris. Ut cursus molestie tellus. Duis ut nisi non lacus rutrum egestas. In ullamcorper nulla eget mauris. Nunc augue. Aliquam consectetuer. Nulla eu nisi convallis odio condimentum aliquet.

Curabitur sit amet urna a urna nonummy feugiat. Donec hendrerit rhoncus augue. Vestibulum in nibh non lorem malesuada euismod. Donec erat leo, auctor at, iaculis sit amet, sodales a, metus. Sed volutpat leo vitae arcu. Sed facilisis enim non ligula. Donec consectetuer nonummy sapien. Aliquam et augue ac leo mattis sodales. Pellentesque quis magna vitae elit porta suscipit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Morbi enim mauris, blandit vitae, interdum quis, dictum vitae, ipsum. In magna erat, elementum consectetuer, aliquam mollis, consectetuer sit amet, tortor. Duis a nulla.

Nullam at tortor. Suspendisse eget velit eu elit mattis consequat. Cras non mauris. Suspendisse purus elit, tempor sit amet, fringilla id, convallis ut, justo. Donec sit amet mauris vitae risus pulvinar tristique. Maecenas ipsum. Cras vulputate, libero vitae vehicula lacinia, ante eros blandit erat, nec egestas massa felis non odio. Donec mi lacus, pulvinar eu, dignissim quis, egestas at, lorem. Vivamus vehicula, turpis non imperdiet eleifend, velit quam congue libero, accumsan imperdiet arcu libero et velit. Suspendisse justo.

Pellentesque ornare mattis sem. Nulla facilisi. Etiam bibendum pharetra est. Sed mi risus, porta ac, venenatis in, pulvinar ac, eros. Phasellus laoreet erat. Vivamus sollicitudin hendrerit urna. Curabitur sed odio. Quisque vitae lacus et velit egestas tempor. Nulla feugiat lacus nec elit. Aliquam lacus. Morbi malesuada pulvinar lectus. Aliquam aliquet fringilla nisi. Morbi at libero.

<div style="border: solid 2px black; height: 100px; width: 300px; overflow: auto;">
put content in here...

I did that by using setting a defined height and width in the div, and setting the overflow on the div to auto.  Using auto gives only gives you scroll bars when needed, so if your control is dynamically filled, they won't show up until needed.  You could also do this with an ASP:Panel and get the same look and feel, but be easily able to dynamically update the content of the control:


asp:Panel ID="Panel1" runat="server" Height="100px" Width="300px" Style="border: solid 2px black;overflow: auto;">
put content here