I started out this post like this:

...and so on.

If you are working with static content and thus know how big your containers need to be, it is trivial to create a layout using divs that can format that content any way your heart desires.  However, throw in an unknown data source and expect the contents of a container to include everything from three short words to a specially formatted combination of images and text, the whole thing goes absolutely nuts.

Common problem: I want to make a container with content click-able.  I want the container to stretch to the size of the inner content and paint a border around it.  No problem,  display: inline.  Well, I actually need it to live all alone on that line.  Then set  position: relative; display: inline; and add a div after the content with clear:left;.

Let's say you have a common navigation element on which you assign "onclick"  and you want it to only be as big as the content it contains.  However, you want a group of them to appear vertically stacked on the page and control the layout properties via your css stylesheet.

There are a few considerations.  First, when you clear in IE, the width of the element does not realize it now has more room.  You will have to set white-space:nowrap;  That is the only thing that I haven't resolved yet. The rest are as follows: IE might start to vary from the standard box model. Google "Box Model Hack" to find answers to these problems. If content follows one of your clickable items, you need an element that will clear the row. It's in the example.

 <style>
.LayoutColumn{
    width:47%;
    float:left;
    position:relative;
    margin:5px;
    background-color:#f3f3f3;
    border:1px solid #c3c3c3;
}

.NavItem{
    
    position:relative;
    float:left;
    clear:left;
    white-space:nowrap;
    
    background-color:#804040;
    color:white;
    border:red 1px solid;
}

.LineClearer{
    clear:both;
}
</style>
<div class="LayoutColumn">
            A column to ensure you can do this crazy stuff inside a container
</div>
<div class="LayoutColumn">
    
            <div class="NavItem" onclick="alert(this.innerHTML)">Yessir, this actaully did the trick.</div>
            <div class="NavItem" onclick="alert(this.innerHTML)">oh yeah!</div>
            <div class="NavItem" onclick="alert(this.innerHTML)">What the ...?</div>
            <div class="LineClearer"><!--clears the row--></div>
            Content following the items
</div>