SitePoint Sponsor

User Tag List

Results 1 to 23 of 23
  1. #1
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,530
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

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

    Here is my code...
    Code:
    <!-- LEFT COLUMN -->
    <div id="pageLeftCol">
    	<div class="box">
    		<h2 class="headerBar">Upcoming Events</h2>
    		<p>Lorem ipsum dolor sit amet...</p>
    	</div>
    and...

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

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Just take the <h2> out of the .box div.

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,802
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    You could use negative margin to pull the header wide although the calculations are made awkward by the em padding.

    Code:
    .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).

  4. #4
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,530
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Just take the <h2> out of the .box div.
    But <h2> is supposed to be *inside* the <div class="box">...

    I am using this for now...
    Code:
    <!-- RIGHT COLUMN -->
    <div id="pageRightCol">
    	<!-- Upcoming Events -->
    	<div class="box">
    		<h2 class="headerBar">Upcoming Events</h2>
    		<p>Lorem ipsum dolor sit amet...</p>
    Code:
    .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

  5. #5
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,530
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    You could use negative margin to pull the header wide although the calculations are made awkward by the em padding.

    Code:
    .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).
    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

  6. #6
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,095
    Mentioned
    28 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by DoubleDee View Post
    But <h2> is supposed to be *inside* the <div class="box">...
    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.

    Code:
    ______________
    |  header     |
    ______________
    |             |
    |  content    |
    |             |
    ______________
    I would do it one of these ways so that you can set the padding once.
    Code html5:
    <h2>header</h2>
    <div class="box">
      <h3>content</h3>
      <p>asdf</p>
    </div>
    Code html5:
    <div class="box">
      <h2>header</h2>
      <div class="inner">
        <h3>content</h3>
        <p>asdf</p>
      </div>
    </div>

  7. #7
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,530
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by markbrown4 View Post
    Why does it have to be inside the box?
    See the attached file...
    Attachment 58289


    Debbie

  8. #8
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,095
    Mentioned
    28 Post(s)
    Tagged
    1 Thread(s)
    You can use a free image hosting service like http://imageshack.us/ which is faster.

  9. #9
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by DoubleDee View Post
    But <h2> is supposed to be *inside* the <div class="box">...
    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.

    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.

  10. #10
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,530
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Mark has answered for me, but your image only confirms what I am saying.
    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.

    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

  11. #11
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by DoubleDee View Post
    How do you keep things together?
    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."

    Quote Originally Posted by DoubleDee
    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.
    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.

  12. #12
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,530
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    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

  13. #13
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by DoubleDee View Post
    that approach goes against the structure I am setting up which is semantic because it is all about logically grouping content.
    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.

  14. #14
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    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.

  15. #15
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,095
    Mentioned
    28 Post(s)
    Tagged
    1 Thread(s)
    Off Topic:

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

    This will work.
    Code css:
    .box {
      border: 1px solid #aaa;
    }
    .box h2 {
      background: #aaa;
      padding: 5px 10px;
    }
    .box .inner {
      padding: 10px;
    }
    Code html:
    <div class="box">
      <h2>header</h2>
      <div class="inner">
        <h3>content</h3>
        <p>asdf</p>
      </div>
    </div>

  16. #16
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,530
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by markbrown4 View Post
    Off Topic:

    Debbie, you seem to prefer an argument over receiving help.
    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

  17. #17
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,734
    Mentioned
    31 Post(s)
    Tagged
    0 Thread(s)
    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...

    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 .

  18. #18
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,802
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    If I'm not mistaken some of the comments have been at cross purposes slightly.

    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

  19. #19
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by dresden_phoenix View Post
    You can easily achieve what you want by NOT padding .box and giving the padding to the (direct) children of .box
    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.

  20. #20
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,530
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    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...
    Code:
    .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...
    Code:
    <!-- 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

  21. #21
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,802
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    I think you've just stated what I was saying and the solution would be to add 15px (or whatever) of horizontal padding to the box and then the header bar would have negative margins of 15px. If you use the code I already provided it will work everywhere with no problem. You could use em padding on the box but then you'd need to work out what the negative margin of the header bar will be because its font-size is different. Even if you work it out on a calculator it will likely always be 1px out because ems are rounded measurements and not exact like pixels. In a tight space like that I would always use pixel padding.

    The choice is yours.

  22. #22
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    Actually, you could have it simpler than that if you don't want to use negative margins on the h2 by grouping all elements you're going to use for the boxes.

    You could remove the left and right padding from .box and add it to all inner elements you'll be using. Yes, that is more work, but if you group them together, then you'll always have a single instance where to change them, like so:


    Code CSS:
    .box p, .box dl, .box dt, .box dl, .box ol, .box ul, .box table, .box blockquote, .box h3, .box h4, .box h5 {
        padding: 1em;
    }
    That way you have a single instance you'd need to change should the need arise and you can keep your initial HTML structure.
    Maleika E. A. | Rockatee | Twitter | Dribbble



  23. #23
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,530
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    I think you've just stated what I was saying and the solution would be to add 15px (or whatever) of horizontal padding to the box and then the header bar would have negative margins of 15px. If you use the code I already provided it will work everywhere with no problem. You could use em padding on the box but then you'd need to work out what the negative margin of the header bar will be because its font-size is different. Even if you work it out on a calculator it will likely always be 1px out because ems are rounded measurements and not exact like pixels. In a tight space like that I would always use pixel padding.

    The choice is yours.
    Great minds think alike!

    Thanks,


    Paul


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •