Semantics of decorative/padding wrapper divs

[maxor]

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

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

[Paul O'B]

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

[vgarcia]

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

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 .

[maxor]

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

Paul

I figured as much. Thanks for the reply!

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

[vgarcia]

Does that mean you can switch between 'broken' and 'not broken' or 'Microsoft' and 'Most everyone else'??

Yes.

[stymiee]

I gotta ask you two css and design gurus something: where do you get your information from?

[Paul O'B]

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

[stymiee]

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.

[Paul O'B]

Hi,

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

here you are (in no particular order)

http://www.meyerweb.com/eric/css/edge/
http://www.zeldman.com/
http://www.alistapart.com/
http://www.positioniseverything.net/
http://www.quirksmode.org/?dom/contents.html
http://www.info.com.ph/~etan/w3panth...ifiedsbmh.html
http://stopdesign.com/
http://www.meyerweb.com/
http://www.mezzoblue.com/
http://tantek.com/log/2004/10.html

Paul

[nix112]

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?

[Paul O'B]

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

[stymiee]

Hi,


here you are (in no particular order)

http://www.meyerweb.com/eric/css/edge/
http://www.zeldman.com/
http://www.alistapart.com/
http://www.positioniseverything.net/
http://www.quirksmode.org/?dom/contents.html
http://www.info.com.ph/~etan/w3panth...ifiedsbmh.html
http://stopdesign.com/
http://www.meyerweb.com/
http://www.mezzoblue.com/
http://tantek.com/log/2004/10.html

Paul

Man, I had no free time before, but this is gonna push me to the edge! Thanks!

[vgarcia]

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 .

[stymiee]

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.

[Paul O'B]

and what you can cobble together to make it look like it's working

lol - I know what you mean