By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
455,241 Members | 1,426 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 455,241 IT Pros & Developers. It's quick & easy.

Correctness of code for box with header

P: n/a
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>
&nbsp;
</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>
Jul 20 '05 #1
Share this question for a faster answer!
Share on Google+

This discussion thread is closed

Replies have been disabled for this discussion.