Correctness of code for box with header

Ryan Stewart · Mar 6, 2004

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>

<div style="width: 250px; border: 2px solid #333399;">

<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> 


<div>
<p>Some stuff to put in this block.</p>
<p>Could be a lot.</p>
<p>But you never know.</p>
</div> 

</div> 
</body>
</html>

Spartanicus · Mar 6, 2004

Ryan Stewart said:
In some situations, I'd like to put some content within a box with a header.

h1, h2, h3, h4, h5, h6 take your pick (don't use divs)

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?

Without actual data it's impossible to make suggestions as to the right
type of markup. Achieving the look is the easy bit (text-align one bit,
float the other).

The code I have included

URLs are preferred.

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?

I get the same in Mozilla, IE stupidly stretches the div height to
accommodate the content (non standard compliant behaviour).

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.

Probably (depends on context).

vertical-align: center

vertical-align:middle

Ryan Stewart · Mar 6, 2004

Spartanicus said:
header.

h1, h2, h3, h4, h5, h6 take your pick (don't use divs)

Okay, but whichever I use, my questions remain the same.

sizes?

Without actual data it's impossible to make suggestions as to the right
type of markup. Achieving the look is the easy bit (text-align one bit,
float the other).

The data is dynamic. What I provided is representative of what this box
widget could contain. The look is what I'm concerned with here. Is there a
better way to get this same look? My main concern is the header. The body is
very simple.

URLs are preferred.

http://68.184.230.252:8080/strutsTest/testPage.jsp
for now.

I get the same in Mozilla, IE stupidly stretches the div height to
accommodate the content (non standard compliant behaviour).

What version of Mozilla? With 1.6, it doesn't cut anything off, though it is
a bit closer to the bottom than in IE. Yes, IE will stretch a div to
surround any floats that it contains, and though that is not in compliance
with standards, it's the behavior I sometimes wish for and specifically what
I would like in this instance. Then I wouldn't need the empty div there to
fill in the gap between the floats.

Probably (depends on context).

If the image is taller than 1em, I think you would need to stretch the
header to accomodate it.

vertical-align:middle

Oops. Obviously I didn't need it though, as the text was positioned
correctly. I think that was a holdover from something I had tried before.
Thanks for the reply.

Spartanicus · Mar 7, 2004

Ryan Stewart said:
The data is dynamic. What I provided is representative of what this box
widget could contain.

It isn't, hence it's impossible to suggest markup.

The look is what I'm concerned with here.

First get your markup right, then start thinking about how you want it
to look.

Is there a better way to get this same look?

I just told you. We can't supply a complete example without real
content.

What version of Mozilla?

A recent one.

With 1.6, it doesn't cut anything off

It probably does with different settings. IIRC you used relative font
sizing, thus user settings affects the result.

Yes, IE will stretch a div to
surround any floats that it contains, and though that is not in compliance
with standards, it's the behavior I sometimes wish for and specifically what
I would like in this instance. Then I wouldn't need the empty div there to
fill in the gap between the floats.

Use a standard compliant renderer for developing, only bring in IE at
the end of the developing cycle.

If the image is taller than 1em, I think you would need to stretch the
header to accomodate it.

I've used a pixel sized header so that it matches the height of an image
here: http://www.pan-europe.utvinternet.ie

The navbar used on that page uses left and right aligned text in the way
I suggested, vertical alignment is achieved by setting an appropriate
line height and font size. You can specify different font sizes to
create the visual appearance you want provided you use appropriate
values for both.

Spartanicus · Mar 7, 2004

Spartanicus said:
I've used a pixel sized header so that it matches the height of an image
here: http://www.pan-europe.utvinternet.ie

To expand on that, the sizing in pixels is done via line-height, not
height, thus the header will expand to accommodate font zooming.

Ryan Stewart · Mar 7, 2004

Spartanicus said:
It isn't, hence it's impossible to suggest markup.

How can you say it isn't representative when you don't know what I'm doing
with it? I want a bordered box with a header that can have some text on the
left and on the right at the same time. That's how my sample layout was
provided. The main content of the box itself can vary.

First get your markup right, then start thinking about how you want it
to look.

That's exactly what I was asking about with this post originally. How do you
suggest I make my markup "right"?

I just told you. We can't supply a complete example without real
content.

Define "real content". As I said, text to the left and right in the header,
internal content may be a few lines of text, may be text and graphics, may
be a complex layout.

A recent one.

It probably does with different settings. IIRC you used relative font
sizing, thus user settings affects the result.

I did, yes. That's probably what caused it.

Use a standard compliant renderer for developing, only bring in IE at
the end of the developing cycle.

No such thing, AFAIK. I develop in IE and Mozilla or Netscape concurrently
so that I don't have to spend an inordinate amount of time tracking down
stupid little incompatibilities in one browser or the other.

I've used a pixel sized header so that it matches the height of an image
here: http://www.pan-europe.utvinternet.ie

The navbar used on that page uses left and right aligned text in the way
I suggested, vertical alignment is achieved by setting an appropriate
line height and font size. You can specify different font sizes to
create the visual appearance you want provided you use appropriate
values for both.

Thanks for the link. I'll definitely look into it more. I notice though that
you don't seem to have a noindex class defined anywhere, though you use it
on your navbar.

Spartanicus · Mar 7, 2004

Ryan Stewart said:
How can you say it isn't representative when you don't know what I'm doing
with it?

"Left" and "Right" is not real content, your usage of a div suggest that
it has no semantic distinction from normal text, yet you use it as a
header. Whatever content you actually use in place of "Left" and "Right"
is probably not part of 1 header, thus they need to be marked up
individually, hence the method you need to employ to style it so that
you'll get the desired look can't be established.

That's exactly what I was asking about with this post originally. How do you
suggest I make my markup "right"?

Provide a real example with real content.

No such thing, AFAIK. I develop in IE and Mozilla or Netscape concurrently
so that I don't have to spend an inordinate amount of time tracking down
stupid little incompatibilities in one browser or the other.

Then you get what you describe, a sense of "IE is doing what I want, how
can I get other UAs in line with IE". This approach won't work.

I notice though that
you don't seem to have a noindex class defined anywhere, though you use it
on your navbar.

It's used by the Atomz search bot.

Ryan Stewart · Mar 7, 2004

Spartanicus said:
"Left" and "Right" is not real content, your usage of a div suggest that
it has no semantic distinction from normal text, yet you use it as a
header. Whatever content you actually use in place of "Left" and "Right"
is probably not part of 1 header, thus they need to be marked up
individually, hence the method you need to employ to style it so that
you'll get the desired look can't be established.

Provide a real example with real content.

The whole point of this is that it's supposed to be generic. I'm developing
some custom tags for JSP to create a content pane with customizable look and
feel via CSS. "Left" is the title describing the box as a whole, i.e.
"Message", "Category Listing", "File Description", "User Details",
"Favorites", "My Breakfast". It could be anything. "Right" could be small
hyperlinks, icons, text, or a mix of the three. Most likely to be used as
controls, like a window's minimize, maximize, and close. I don't have time
just now to update the HTML, but I may do so later if you insist.

Then you get what you describe, a sense of "IE is doing what I want, how
can I get other UAs in line with IE". This approach won't work.

I never once asked for that. You pointed out that IE wasn't in compliance
with standards. I agreed but noted its behavior was at times desirable. I
never asked how to get the same behavior from other agents.

Spartanicus · Mar 7, 2004

Ryan Stewart said:
The whole point of this is that it's supposed to be generic. I'm developing
some custom tags for JSP to create a content pane with customizable look and
feel via CSS.

This is not how css should be used:
http://www.w3.org/TR/CSS2/selector.html#class-html

"Left" is the title describing the box as a whole, i.e.
"Message", "Category Listing", "File Description", "User Details",
"Favorites", "My Breakfast". It could be anything. "Right" could be small
hyperlinks, icons, text, or a mix of the three. Most likely to be used as
controls, like a window's minimize, maximize, and close.

These controls are provided by the UA, creating another set of controls
inside the document can only confuse.

Ryan Stewart · Mar 7, 2004

--
Ryan Stewart, A1C USAF
805 CSPTS/SCBE

Spartanicus said:
This is not how css should be used:
http://www.w3.org/TR/CSS2/selector.html#class-html

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.

These controls are provided by the UA, creating another set of controls
inside the document can only confuse.

Either we don't understand each other, or I disagree. Updated version (code
listing below):
http://68.184.230.252:8080/strutsTest/testPage.jsp

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

<html>
<head>
<title>A Container</title>
<style>
.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;
}
</style>
</head>
<body>

<div style="width: 15em; border: 2px solid #333399;">


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



<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>
</ul>


</div>

</body>
</html>

Help with code	0	Jun 12, 2022
Help needed with code	5	Mar 7, 2021
Help with Visual Lightbox: Scripts	2	May 3, 2023
Having trouble centering contents of td ?	3	May 2, 2023
Working on mobile css menu with plenty of frustration!	2	Dec 29, 2022
Help with my responsive home page	2	Dec 14, 2022
Aligned to the left	3	Apr 19, 2023
Need help with code on website (noob)	2	Jul 18, 2022

Correctness of code for box with header

Ryan Stewart

Spartanicus

Ryan Stewart

Spartanicus

Spartanicus

Ryan Stewart

Spartanicus

Ryan Stewart

Spartanicus

Ryan Stewart

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads