Correctness of code for box with header

Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

Threaded View
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.

  <head><title>A Container</title></head>
    <!-- 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;">
        <div style="float: right; font-size: 200%;">
      </div> <!-- End header -->

      <!-- Start body -->
        <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 -->

Re: Correctness of code for box with header

Ryan Stewart, A1C USAF
Quoted text here. Click to load it
I assume you're referring to the note at the bottom. That's something I've
been trying to remember: not using divs for everything, but using other tags
for their intended purpose. I've never been taught HTML in any kind of
formal way, and I'm just making the transition to tableless layout,
primarily because I have the time to do so. I prefer to learn the correct
way to do things, though, even if I get started off the wrong way.

Quoted text here. Click to load it
Either we don't understand each other, or I disagree. Updated version (code
listing below):

The "Edit" is what I mean by a control. It could easily be replaced by an

Quoted text here. Click to load it

    <title>A Container</title>
      .control {
        border: 1px solid #dddddd;
        color: #ffffff;
        font-size: 75%;
        margin-right: 2px;
        padding: 0 2px;
        text-decoration: none;

      h4#boxHeader {
        background-color: #333399;
        color: #ffffff;
        font-weight: normal;
        line-height: 1.33em;
        margin: 0;
    <!-- Start box -->
    <div style="width: 15em; border: 2px solid #333399;">

      <!-- Start header -->
      <h4 id="boxHeader">
        <p style="float: left; margin: 0;">
          My Breakfast Menu
        <p style="text-align: right; margin: 0;">
          <a href="#" class="control">Edit</a>
      <!-- End header -->

      <!-- Start body -->
      <ul style="margin-top: 10px; margin-bottom: 10px;">
        <li>Eggs -- 2</li>
        <li>Toast -- 2</li>
        <li>Sausage -- 1</li>
        <li>Orange Juice -- 1</li>
      <!-- End body -->

    <!-- End box -->

Site Timeline