SitePoint Sponsor

User Tag List

Results 1 to 15 of 15
  1. #1
    With More ! for your $ maxor's Avatar
    Join Date
    Feb 2004
    Location
    Scottsdale, Arizona
    Posts
    909
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Semantics of decorative/padding wrapper divs

    Hello,

    I'm just curious as to what some opinions are on using 'wrapper' divs for decorational purposes (background images, borders etc.) and for width and padding purposes (I'll explain in a bit...)

    Say you've got two floated left divs #main and #side. If you give them each fluid % widths that add up to 100% (70% and 30%) they will fit next to each other as you would expect. However if you give them padding, say 2% all around on each of them, the #side div will fall below the #main div because there isn't enough room to hold them both next to each other [ (70% + 2% + 2%) + (30% + 2% + 2%) ] = 108%

    However, in my experience, if you 'wrap' each of these divs with it's own div #main-wrapper, #side-wrapper and assign the widths (70% and 30% again) and floats (float: left for both) to those wrappers, you can add padding to the divs contained within (those being wrapped) and the layout will not break.

    For you visual thinkers...
    HTML Code:
     
    <div id="main-wrapper"> <!-- floated left & 70% wide -->
      <div id="main"> <!-- 2% padding all around -->
        <p>Main Content Div</p>
      </div> <!-- end main -->
    </div> <!-- end main-wrapper -->
    
    <div id="side-wrapper"> <!-- floated left & 30% wide -->
      <div id="side"> <!-- 2% padding all around -->
        <p>Side Content Div</p>
      </div> <!-- end side -->
    </div> <!-- end side-wrapper -->
    As you can see above this method uses some extra markup, which is something I'd rather not do, however I've found that using this technique works well across more user agent/OS combos.

    So any thoughts on this technique? Is there a better way to achieve the same effect without the extra markup that's still as reliable?

    Thanks!

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    At present thats the only way to do it so you don't have much choice in the matter .(unless you add the padding into the equation 66%+2%+2% etc)

    (Your example would have made more sense with using pixels as padding because they can't be added to percentages to total something exact like 100%)

    I believe there are drafts for the css specification so that you can choose which box model to use. Then you will be able to use the broken box model version and specify 100% width and your padding will be applied inside.

    Regarding nesting elements to avoid the broken box model some purists say that adding markup to the html is a bigger hack than putting hacks in your css. If you keep your hacks in the css then they can be changed instantly a solution is found. On the other hand if extraneous code is sprinkled through your html then its likely to be there for ever.

    I think its half a dozen of one and six of the other

    Paul

  3. #3
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Paul O'B
    I believe there are drafts for the css specification so that you can choose which box model to use. Then you will be able to use the broken box model version and specify 100% width and your padding will be applied inside.
    Yeah, the CSS3 spec calls for a property called "box-sizing", which will allow you to switch between box models. Opera already supports it and Mozilla has an experimental variant known as "-moz-box-sizing".
    Quote Originally Posted by Paul O'B
    Regarding nesting elements to avoid the broken box model some purists say that adding markup to the html is a bigger hack than putting hacks in your css. If you keep your hacks in the css then they can be changed instantly a solution is found. On the other hand if extraneous code is sprinkled through your html then its likely to be there for ever.
    True, but if the document is structured right in the first place it's possible to do a nice and relatively consistent layout without hacks and without extra elements. It's usually the exact pixel perfection that requires hacks, and personally I can take a few pixels being off in IE5 .

  4. #4
    With More ! for your $ maxor's Avatar
    Join Date
    Feb 2004
    Location
    Scottsdale, Arizona
    Posts
    909
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B
    I think its half a dozen of one and six of the other

    Paul

    I figured as much. Thanks for the reply!

    Quote Originally Posted by vgarcia
    Yeah, the CSS3 spec calls for a property called "box-sizing", which will allow you to switch between box models. Opera already supports it and Mozilla has an experimental variant known as "-moz-box-sizing".
    Does that mean you can switch between 'broken' and 'not broken' or 'Microsoft' and 'Most everyone else'??

  5. #5
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by maxor
    Does that mean you can switch between 'broken' and 'not broken' or 'Microsoft' and 'Most everyone else'??
    Yes.

  6. #6
    He's No Good To Me Dead silver trophybronze trophy stymiee's Avatar
    Join Date
    Feb 2003
    Location
    Slave I
    Posts
    23,424
    Mentioned
    2 Post(s)
    Tagged
    1 Thread(s)
    I gotta ask you two css and design gurus something: where do you get your information from?

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    I gotta ask you two css and design gurus something: where do you get your information from?
    I don't know about Vinnie but I just make it up

    For the new stuff you can get most of the information from the w3c site and read up on all their new drafts, proposols and specifications etc.

    Other than that I get most of my info from either books, trial and error and sites on the interenet such as Eric Meyer, Zeldman and all the other usual suspects.

    Paul

  8. #8
    He's No Good To Me Dead silver trophybronze trophy stymiee's Avatar
    Join Date
    Feb 2003
    Location
    Slave I
    Posts
    23,424
    Mentioned
    2 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Paul O'B
    I don't know about Vinnie but I just make it up

    For the new stuff you can get most of the information from the w3c site and read up on all their new drafts, proposols and specifications etc.

    Other than that I get most of my info from either books, trial and error and sites on the interenet such as Eric Meyer, Zeldman and all the other usual suspects.

    Paul
    If you wouldn't mind posting links to some of your favorite sites my bookmarks would surely appreciate it.

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)

  10. #10
    SitePoint Enthusiast
    Join Date
    Oct 2004
    Location
    Montreal
    Posts
    79
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Regarding nesting elements to avoid the broken box model some purists say that adding markup to the html is a bigger hack than putting hacks in your css. If you keep your hacks in the css then they can be changed instantly a solution is found. On the other hand if extraneous code is sprinkled through your html then its likely to be there for ever.
    I wouldn't consider it a hack since handling padding/margins in wrapper divs should always be good in the future, so long as the code is validated. If you use a CSS hack it may be quicker to fix, but there's a chance it will get broken when browsers upgrade. Does the added bandwidth that wrapper divs require outweigh its benefits? Are there other things to consider?

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    If you use a CSS hack it may be quicker to fix, but there's a chance it will get broken when browsers upgrade.
    Not when you're targetting older browsers as they are not going to be changed anyway and so are 100% safe in those cases. Browsers could well introduce new bugs anyway that will make existing valid code not work let alone the hacks. Some of the opera7 incarnations have bugs that were not in previous versions and valid code stopped working so theres no guarantee on anything really.

    I'm not saying I agree with hacks and my first comment was just putting forward the argument as "some purists may say" and that wasn't exactly my view

    However you may wish to read Tanteks thoughts on the subject as he is strongly opposed to adding unneccessary mark up when a simple hack fixes the problem.

    Look at item 6 here:

    http://tantek.com/log/2004/09.html#d07t1434

    Its all his fault anyway as he invented the original box model hack.

    Paul

  12. #12
    He's No Good To Me Dead silver trophybronze trophy stymiee's Avatar
    Join Date
    Feb 2003
    Location
    Slave I
    Posts
    23,424
    Mentioned
    2 Post(s)
    Tagged
    1 Thread(s)

  13. #13
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by stymiee
    I gotta ask you two css and design gurus something: where do you get your information from?
    Google is my main source. Usually I'll just try some random search words that I think will help address the issue I'm having and look at the first few results. Looking at a lot of the CSS threads here help out as well. However, nothing beats pure experience. Once you've coded 100 different CSS layouts you really figure out what works, what doesn't work, and what you can cobble together to make it look like it's working .

  14. #14
    He's No Good To Me Dead silver trophybronze trophy stymiee's Avatar
    Join Date
    Feb 2003
    Location
    Slave I
    Posts
    23,424
    Mentioned
    2 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by vgarcia
    However, nothing beats pure experience. Once you've coded 100 different CSS layouts you really figure out what works, what doesn't work, and what you can cobble together to make it look like it's working .
    So start coding. Gotcha.

  15. #15
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by vinnie
    and what you can cobble together to make it look like it's working
    lol - I know what you mean


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
  •