Padding messing up Header Bar

Grrrr…

So thanks to everyone, I have a better understanding of how “boxes” work in CSS as far as Padding, Borders, and Margins go.

Now I am trying to get my CSS to do two competing things?! :headbang:

Here is my code…


<!-- LEFT COLUMN -->
<div id="pageLeftCol">
	<div class="box">
		<h2 class="headerBar">Upcoming Events</h2>
		<p>Lorem ipsum dolor sit amet...</p>
	</div>

and…


.box{
	margin: 20px 0;
	padding: 1em;
	border: 1px solid #AAA;
	background-color: #FFC;
}

.headerBar{
	padding: 0.3em 0;
	text-align: center;
	font-size: 1.4em;
	font-weight: bold;
	color: #FFF;
	background-color: #AAA;
}

I want my “box” to have a default Padding = 1em so whatever is placed inside of it has some space between it and the border. However, I also need my “headerBar” to fill up the entire width of the “box”.

Is there a way to have it both ways?! :-/

The easy solution is to set the Padding = 0, but them I would have to add Padding to every element that I place inside a “box” and that becomes a big problem when you mix disparate copy (e.g. <h2>, <h3>, <h4>, <p>, <ul>, etc.)

Debbie

Just take the <h2> out of the .box div. :slight_smile:

You could use negative margin to pull the header wide although the calculations are made awkward by the em padding.


.headerBar{
	padding: 0.3em 0;
	text-align: center;
	font-size: 1.4em;
	font-weight: bold;
	color: #FFF;
	background-color: #AAA;
	margin:0 -.7em;
	position:relative;/* ie6 and ie7 fixes or they won't show negative portions properly;*/
	zoom:1.0;/* ie6 and ie7 fixes or they won't show negative portions properly */
}

That’s why I still prefer pixel padding as it stays the same no matter what the parent font-size (and I don’t really want my padding space to grow with text size anyway - I just want the text and the container to grow).

But <h2> is supposed to be inside the <div class=“box”>… :wink:

I am using this for now…


<!-- RIGHT COLUMN -->
<div id="pageRightCol">
	<!-- Upcoming Events -->
	<div class="box">
		<h2 class="headerBar">Upcoming Events</h2>
		<p>Lorem ipsum dolor sit amet...</p>


.box{
	margin: 20px 0;
/*	padding: 1em;				/**/
	border: 1px solid #AAA;
}

.headerBar{
	padding: 0.3em 0;
	text-align: center;
	font-size: 1.1em;
	font-weight: bold;
	color: #FFF;
	background-color: #AAA;
}

p{
	padding: 0.5em 1em;
}

Debbie

If I use pixels for Padding am are things guaranteed to work in any browser, or could things break?

What do you think about my original request versus what I just posted in response to Ralph?

(It still seems like putting padding on my <div class=“box”> is a more reliable way to go, but then my headerBar is one drawback?!) :-/

Debbie

Why does it have to be inside the box? I think Ralph’s suggestion was a good one.
I find it generally easier to manage when you’re not controlling the inner elements positioning solely based on what container they’re in.


______________
|  header     |
______________
|             |
|  content    |
|             |
______________

I would do it one of these ways so that you can set the padding once.


<h2>header</h2>
<div class="box">
  <h3>content</h3>
  <p>asdf</p>
</div>


<div class="box">
  <h2>header</h2>
  <div class="inner">
    <h3>content</h3>
    <p>asdf</p>
  </div>
</div>

See the attached file…

Debbie

You can use a free image hosting service like http://imageshack.us/ which is faster.

Mark has answered for me, but your image only confirms what I am saying. The .box div is only for styling, and you don’t want that style on the header, so don’t put the heading in there. :slight_smile:

You should simply style the heading as shown in the image there—with a gray background, top, left and right border. The .box just needs left, right and bottom border.

Mark answered for me…

???

The .box div is only for styling, and you don’t want that style on the header, so don’t put the heading in there. :slight_smile:

You should simply style the heading as shown in the image there—with a gray background, top, left and right border. The .box just needs left, right and bottom border.

How do you keep things together?

And also…

Logically, the Header and the Content are inside of the Box…

Placing the <h2> before the box and its content doesn’t make sense to me.

Anyone else have opinions on this? (Paul’s probably in bed.)

Debbie

I described what to do: “You should simply style the heading as shown in the image there—with a gray background, top, left and right border. The .box just needs left, right and bottom border.”

The box has no purpose other than styling. It has no semantic meaning, so there’s no issue of logic. The only logic involved is that you don’t want the .box styles applying to the header, so don’t put it in there.

And when I have several Headings that all need a border around them?

Again, a “box” contains one or more Headings and one or more Paragraphs/Content.

If I only had one <h2> then what you and the other guy proposed could work, but that approach goes against the structure I am setting up which is semantic because it is all about logically grouping content.

Sorry, but I disagree.

Besides, there are two workarounds to my original post/problem.

Debbie

Again, ‘semantic’ is not the right word here. The div has no semantics. It’s really just a hook for styling, like a span. If you don’t want the heading(s) to be constrained by the styles within that box div, then don’t put them in there. It’s a very simple issue. :slight_smile:

I probably should revise the ‘solution’ I posted above, since, on second thoughts, I would look at it this way myself: You want a gray box with a border around the heading and text, so create a div box for that purpose. Inside that, you want paragraphs to have some padding around them that the headings won’t share. So put another div around the paragraphs with padding on it. That’s the most logical route, IMHO, remembering that divs are just hooks for styling. This isn’t divitis, because each div has a useful purpose.

Off Topic:

Debbie, you seem to prefer an argument over receiving help.

This will work.


.box {
  border: 1px solid #aaa;
}
.box h2 {
  background: #aaa;
  padding: 5px 10px;
}
.box .inner {
  padding: 10px;
}


<div class="box">
  <h2>header</h2>
  <div class="inner">
    <h3>content</h3>
    <p>asdf</p>
  </div>
</div>

So when people don’t agree with you it’s an argument?

Your solution won’t work for a lot of what I am doing.

That doesn’t make me “argumentative”, it means you are solving the wrong problem…

Debbie

Maybe I missed something here.

I want my “box” to have a default Padding = 1em so whatever is placed inside of it has some space between it and the border. However, I also need my “headerBar” to fill up the entire width of the “box”.

BREATHE… let go of expectation … THINK…:slight_smile:

Any block element , (which is NOT FLOATED) has 100% width by default… even with padding. for example DIV {padding:1em} will have 1em of padding on the left and right but will actually only be 100% of its container (and not 100% +2em). I can see that that yoru desire is to get #AAA color of the H2 from edge to edge of .box. The problem is, because of what you thought you learned, you probably decided to apply the padding to .box. Again THINK … WHY?

You can easily achieve what you want by NOT padding .box and giving the padding to the (direct) children of .box while at the same time making sure none of them have explicit width. It was probably NOT the way you imagined it would work, but that seems to be biggest stumbling block most people face when learning CSS .

If I’m not mistaken some of the comments have been at cross purposes slightly.:slight_smile:

I believe Debbie’s original question was that the main column container (e.g left column) would have the set width and to achieve consistent padding in that box you could pad the actual container (but reduce the width) rather than addressing all the inner elements. That’s why you can’t move the h2 outside of the box because the box is effectively the left column container.

Padding the container if using ems is the only reliable way to get consistent padding because you can’t address inner elements who have different font-size as the calculations would be painful.

The problem with padding the container is as shown and that you get what you paid for and you always have padding and would need negative margins to make any inner elements appear full width. That’s why I suggested using pixel padding and the the negative margin calculations are exact.

Whether you pad the container or pad the inner elements is just a choice you make depending on situation. If you really want a gutter around the content then pad the container but if you want some elements to butt to the edge then you will be better off padding the inner elements instead but be careful with em calculations - which is why I still say use pixels for padding either way

But you never know how many elements you might want in there, so unless you either make a long list of potential elements (p, h2, h3, OL etc. with padding) or use the universal selector, it may become a mess to maintain.

If the original issue was as Paul describes above, that should have been made clear to prevent us running around in circles. :slight_smile:

Sorry, Paul, but I didn’t really follow what you said in your last post - a rarity! - so let me re-state what it is that I’m looking for. (Although I thought my original post was very clear?!)

Starting over…

My website will have LOTS of content. Content which is disparate. To manage and group my content, I want to put things into “boxes”. Or for Mac people, I want to put my content into what I’m calling “widgets”. (Think about how you can “drag-and-drop” disparate apps/information onto your desktop. Same concept for my website!)

So I have a 3-Column, Fluid-Center, Fixed-Width Left/Right Column, blah, blah, blah layout thanks to Sir Paul. :wink:

My Left Column is a fixed 200px, and the first place I’m looking to drop some "boxes’/“widgets”.

On first guess, I want to create a CSS “box” that has these generic properties…


.box{
	margin: 20px 0;
	padding: 1em;
	border: 1px solid #AAA;
}

These “boxes” can be further styled with compound Classes, but that is the essence of them.

I am leaning towards a “box” having “built-in” 1 em Padding

Why?

First I need space between the borders and the text. Duh! More importantly, if my “box” has 1em of built-in spacing, then anything I drop within it would be “plug-and-play” and have the gutter I want from the get-go.

By contrast, if my “box” had no padding, then I’d have to assign Margins/Padding to each element that could go into my “box”

The bigger issue is that a 1em Margin/Padding on an <h2> would not be the same as on a <p> or <small> and so things wouldn’t be left-aligned - which they need to be. (I could use pixel-based Margins/Padding, but I’d still have to apply things in 20 places versus in ONE PLACE!!!)

Back to my Left Column…

Since we already established yesterday that my Left Column is fixed-width, and that my “box” would slide into the 200px spot, and that any Borders or Margins or Padding would just reduce the inside space where copy goes, no problems there.

So everything seems perfect, except for the one “gotcha” that I found yesterday afternoon…

Each “box” needs to have a “header bar” that is some Heading (e.g. <h2>) with an #AAA background and Bold, White Text, and which obviously needs to go the entire horizontal width of my “box”.

For any programmers out there…

A “Box” HAS A “Header Bar”
A “Box” CAN HAVE multiple “Content Headings” (e.g. <h3>, <h4>) beneath the “Header Bar”
A “Box” HAS SOME “Content”
A “Box” HAS SOME “Borders”

The earlier suggestion of duct-taping an <h2> onto a “box” would technically work, but is wrong for several reasons, including that it is conceptually wrong, and more so, it wouldn’t work for this scenario…


<!-- Upcoming Events -->
<div id="boxEvents" class="box">
	<h2 class="headerBar">Christmas Events</h2>

	<h3>Curren Dates</h3>
	<ul>
		<li>December 3, 2011</li>
		<li>December 10, 2011</li>
		<li>December 17, 2011</li>
	</ul>

	<h3>Upcoming Locations</h3>
	<ul>
		<li>Phoenix, AZ</li>
		<li>Chandler, AZ</li>
		<li>Albuquerque, NM</li>
	</ul>
	<p>Lorem ipsum dolor sit amet...</p>
</div>

Visually I am looking for something similar to what Apple does in the Apple Store. Or, if you think about it, what SitePoint does throughout its site, particularly when you manage your “User Profile”.

One of my overarching goals is to “Write Once, Re-Use Many Times”.

In my opinion, having a “box” have built-in padding/gutters makes the most sense, because anything you drop inside of it has the space it needs.

Sure, you could give a “box” no padding, but the downsides have already been pointed out above.

I haven’t had a chance to play with Paul O’s negative margins on my “Header Bar” - and am always nervous that what works on my MacBook will break in IE - but that seems like the best approach.

Feel free to jump back in, Paul O’, and let me know if this extended post helps clarify things, and if you’d change any advice your gave.

Thanks,

Debbie
:cool: