Jonathan Yong

How do you create a floating box which is attached to a particular corner of a layout container like this :

The key is to use the CSS float attribute.

For example to create the above layout, use the following css style and sample:

<style type="text/css">

#main
{
    border:1px solid #000;
    background:#ffffff;
}

#main #floatbox {
    background: #dddddd;
    float: left;
    width: 230px;
    height : 50px;
    border: #ff0000 1px solid;
}
</style>

<div id="main">
<div id="floatbox">
This is in a box.
</div>
I'm sitting in a hotel room in San Francisco working on a project that can't wait until I get back to my office, and all I can think about is my reliance on connectivity. I, and a bunch of other happy developers, am here because of the VSLive/VBits conference. Trouble is, I didn't bring everything I need for my work, so now I desperately need a network connection. Sure, I have dial-up access in the hotel room, but though quick enough for e-mail, it's anything but practical for large file transfers.
<p>
Sound like a familiar situation? Well, it happens to me all the time, and usually it's a pain. This time, however, I decided I'm not going to be beaten by mere, piddling circumstances. I am, after all, a developer. Not only that, I'm a developer looking for a good time (developing that is). I'm going to solve this problem—and turn the solution into this month's article.
<p>
Okay. So let's say there is a file that I need and I can't wait until I'm back in Redmond. For instance, let's say it is the demo for Impossible Creatures (which is a whopping 285 MB), and that I really, really need it for some serious research. As I said, my dial-up access is slower than a dead snail, but there is wireless in a nearby coffee shop that should be considerably faster.
</div>