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