Problem with DIV width

**DoubleDee** · Mar 29, 2011 17:56

I am trying to create a shaded column heading, and can't get this working?!

Why is it that when I make .graybar 100% it extends beyond the #thankyou container and that when I set it to 580px it has a larger gap on the right side? (5px + 580px + 5px = 590px?!)

Code HTML4Strict:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 
<head>
	<title>Thank You</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
 
		body{
			background: #FFF;
			font-family: Helvetica, Arial, Sans-Serif;
			line-height: 1.4em;
			font-size: 0.9em;
		}
 
		h2{
			padding: 87px 1em 0 20px;
			font-size: 1.2em;
			text-align: left;
		}
 
		p{
			padding: 0.5em 20px;
			font-size: 0.9em;
		}
 
		#thankyou{
			z-index: 0;																/* Place below other elements */
			width: 590px;
			margin: 10px auto;
			padding: 5px;
			border: 1px solid #444;
		}
 
		.graybar{
			/* consider merging with .colhead */
			width: 580px;
/*			width: 100%; /**/
			height: 20px;
/*			padding: 0.3em 0em; /**/
			text-align: left;
			line-height: 1.4em;
			font-size: 1em;
			font-weight: bold;
			color: #FFF;
			background-color: #AAA;
		}
 
	</style>
</head>
 
<body>
	<div id="thankyou">
		<h2>Thank you for your order!</h2>
		<hr>
		<p>Be sure to print this page as a receipt!!</p>
		<div class="graybar">Order Information</div>
	</div>
</body>
</html>

Thanks,

Debbie

**dresden_phoenix** · Mar 29, 2011 18:46

Hmmmr. Seems to be working fine when I checked it.

Did you add PADDING along with the 100% width? At which case the bar would indeed become longer tan its container and/or have uneven gap as you described.

This is the case where Firebug is handy ( tho not needed) remember that the actual physical space an object takes is its width plus its padding plus ( although you dont see it, it matters for floating ans spacing) it's margins.

Also, remember a DIV is a a block element... you actually don't need to declare width on it and it will stretch automatically to fit its container , w/o need of calculating padding or margin ( unless you give it a width)

Why is it that when I make .graybar 100% it extends beyond the #thankyou container and that when I set it to 580px it has a larger gap on the right side? (5px + 580px + 5px = 590px?!)

All that I said above also applies to #thankyou which actually computes to 600px..
590px of content + 10px (2*5) of padding.

anyway, I would suggest simply doing this:

Code:

        #thankyou{
            z-index: 0;                /* Place below other elements */
            width: 590px;
            margin: 10px auto;
            padding: 5px;
            border: 1px solid #444;
        }
 
        .graybar{
    		padding: 0.3em; 
            text-align: left;
            line-height: 1.4em;
            font-size: 1em;
            font-weight: bold;
            color: #FFF;
            background-color: #AAA;
        }

**DoubleDee** · Mar 29, 2011 19:10

FIREFOX KILLS ME!!!!!!!!!!!!

I seem to get in these "Infinite Cache Loops" where I clean out my browser cache yet it keeps loading the old page so I get messed up with my CSS.

Just finished supper and NOW it works?!

Originally Posted by dresden_phoenix

Hmmmr. Seems to be working fine when I checked it.

Yeah.

Also, remember a DIV is a a block element... you actually don't need to declare width on it and it will stretch automatically to fit its container , w/o need of calculating padding or margin ( unless you give it a width)

Oops! That was embarrassing!

So I don't need the Height: either?

Thanks,

Debbie

**dresden_phoenix** · Mar 29, 2011 19:46

Well took the height out because, fixed height is just that FIXED.

If yyour line wraps or the user enlarges his fonts.. etc, your container would have still remained 20px high.... no good, right? So , although there are occasions where height could be useful, I don't think this was one of them.

**DoubleDee** · Mar 29, 2011 20:00

Originally Posted by dresden_phoenix

Well took the height out because, fixed height is just that FIXED.

If yyour line wraps or the user enlarges his fonts.. etc, your container would have still remained 20px high.... no good, right? So , although there are occasions where height could be useful, I don't think this was one of them.

Aha!

Yeah, I guess that can be accomplished with Line Height or Padding, right?

Debbie

**dresden_phoenix** · Mar 29, 2011 20:40

yes, padding preferably; line-height would do it too, but again if your line wrap, then you will have widely spaced lines of text. it's always good to think ahead... ==

**DoubleDee** · Mar 29, 2011 20:52

Originally Posted by dresden_phoenix

yes, padding preferably; line-height would do it too, but again if your line wrap, then you will have widely spaced lines of text. it's always good to think ahead... ==

You lost me...

Line-Height controls the space between lines. If there is line-wrap, then all that Line-Height does is ensure there is proper spacing between the wrapping text and the first line.

Things being widely spaced *may* occur if your use Text-Alignment: Justify.

Debbie

**dresden_phoenix** · Mar 29, 2011 22:53

I meant vertical space between lines.
Line-height applies to ALL lines. Not just the first. Think of it like setting line spacing in (UGH!!) M$ Word.

Let say , for the sake of this oversimplified example, you wanted that div to be 40px , to that end you don't set padding, but set the line height to 40px. Lets also presume you wanted norma text, so you set a font-size something to the equivalent of 12px. if you text doesn't wrap around it your final output will look similar to having 12px text with 14px of top and 14px of bottom padding total( UA's vary slightly in the way they distribute line-height).

BUT if that same style is applied to a line that wraps... what you get what something that will appear like double-spaced text. Using the same premise as above , the total height will be 80px, with 14px above the first line, 28px between lines and 14px below the second line. Doesn't seem too aesthetically pleasing to me, but it could be a useful effect at times.

That's why I recommend NOT to set height. To set line height at something reasonable and to add padding specifically for the space you want AROUND ALL the text.

**DoubleDee** · Mar 29, 2011 23:15

Originally Posted by dresden_phoenix

I meant vertical space between lines.
Line-height applies to ALL lines. Not just the first. Think of it like setting line spacing in (UGH!!) M$ Word.

Let say , for the sake of this oversimplified example, you wanted that div to be 40px , to that end you don't set padding, but set the line height to 40px. Lets also presume you wanted norma text, so you set a font-size something to the equivalent of 12px. if you text doesn't wrap around it your final output will look similar to having 12px text with 14px of top and 14px of bottom padding total( UA's vary slightly in the way they distribute line-height).

BUT if that same style is applied to a line that wraps... what you get what something that will appear like double-spaced text. Using the same premise as above , the total height will be 80px, with 14px above the first line, 28px between lines and 14px below the second line. Doesn't seem too aesthetically pleasing to me, but it could be a useful effect at times.

That's why I recommend NOT to set height. To set line height at something reasonable and to add padding specifically for the space you want AROUND ALL the text.

Okay, I don't disagree with that.

So, to clarify, you really use Line-Height for spacing between all lines of text in a <p> or whatever, whereas you using Padding for spacing around all lines of text in a <p> or whatever, right?

So even with a one-liner in a column heading like I have, I am safer with Padding for the reasons you mention. Whereas if I had a large paragraph of text and wanted to make it more readable, then that is where Line-Height comes in to play, right?

Debbie

**dresden_phoenix** · Mar 30, 2011 00:36

Yes thats pretty much right.

As I said before.. for a one line paragraph.. line-height and padding will work similarly... the REAL question is... how can you be ABSOLUTELY certain that all the content you put in that element will always be one line? This is how layouts break .. for not being able to handle that ONE exception. Since you have already constrained the width... it's even more likely that a shorter amount of text will need to be wrapped into multiple lines, even more risk...

If you had one or two word buttons, this trick is incredibly handy, but for a headline or a phrase.. possible but risky.... and if it is for variable length content... then it's like swimming with sharks...

As always.. specific cases merit specific inspection..

User Tag List

Thread: Problem with DIV width

Thread Tools

Display

Problem with DIV width

Bookmarks

Bookmarks

Posting Permissions