In some situations, I'd like to put some content within a box with a header.
No real problem there. But what if I want the header to have something on
the left hand side as well as on the right, and possibly of different sizes?
The code I have included appears to work fine in IE 6.0, Mozilla 1.6, NN
7.1, and Opera 7.23, except that Opera chops off the bottom of the 'g' in
"Right". Padding problem? That's minor though. I'm curious if there's a
better way to accomplish this look. As I have it below, you have to
micromanage the heights to fit whatever is within the header. Furthermore,
if you want to put an image in the header, I think you'd have to specify a
fixed height in 'px' to ensure it fits the image properly. Any and all
comments are welcome.
Code:
<html>
<head><title>A Container</title></head>
<body>
<!-- Start box -->
<div style="width: 250px; border: 2px solid #333399;">
<!-- Start header -->
<div style="color: #ffffff; background-color: #333399; padding: 2px;
height: 2em;">
<div style="float: left; line-height: 2em; vertical-align: center;">
Left
</div>
<div style="float: right; font-size: 200%;">
Right
</div>
<div>
</div>
</div> <!-- End header -->
<!-- Start body -->
<div>
<p>Some stuff to put in this block.</p>
<p>Could be a lot.</p>
<p>But you never know.</p>
</div> <!-- End body -->
</div> <!-- End box -->
</body>
</html>
