sides of march (Brian DeMarzo)

A friend of mine was trying to get a rounded corner bar at the top of some web content. He already had the rounded corner images but didn’t know the HTML and CSS markup. I sent him over the following snippet of code as an example:

    <div style="width:100%;background-color:blue;height:14px;margin:0px;padding:0px;font-size:5%">
        <div style="float:left;background-image:url('left.gif');width:14px;height:14px">
        </div>
        <div style="float:right;background-image:url('right.gif');width:14px;height:14px">
        </div>
    </div>

To understand, note the following:

• The width:100% should be set the width appropriate to your content.
• The width and height (14px in the example above) should be replaced by the actual width and height of your rounded corner images.
• What’s with the font-size:5%? Making the font size very small will ensure that any white space will not create a block larger than the desired height (in our case, 14px).

The following bar was made using the above content, using images from this web site.