Hey guys, I'm working on a new blog theme. It's just a simple 1 column layout, but I want the code blocks to extend out. It's very important to me that I don't use div's and that kind of stuff in my content body. I'm also trying to use em measurements for everything, so here's the problem. Since I don't want a bunch of width wrappers in my post body, I decided to put max-widths and margin: 0 autos; on all the elements insides (h3,h4,p,ul,ol,blockquote,etc). The problems start with the headings, they're all different sizes and turn into long decimaled em's where stuff gets rounded out and don't line up. So what I ended up doing is using REM's with px fallbacks, support isn't really there yet and it'll look dumb if everything expands except the most important part (for an old browser user). So now I'm trying to get creative and find a better way. I was trying some stuff with relative-absolute-:after but can't really get that working either. Can anyone think of a better way to handle this?? <h3>Super cool sub heading</h3> <p>some paragraph text</p> <h4>Sub sub heading</h4> <p>Blah blah blah</p> <pre> <code>Then there's code blocks formatted like this</code> </pre> <p>more text</p> Code (markup): If it helps I can do: <div class="width-wrapper"> <h3>Super cool sub heading</h3> <p>some paragraph text</p> <h4>Sub sub heading</h4> <p>Blah blah blah</p> <pre> <code>Then there's code blocks formatted like this</code> </pre> <p>more text</p> </div> Code (markup): but only around the entire post, not individual elements.
Suck it up and use that single outermost DIV, that's what they're for; saying "this area may receive presentation" without actually saying what that presentation is in the markup. If you're throwing max-width at EVERY little element you're probably doing something wrong. You are most always better off allowing elements to grow to fit a container and constraining the container than throwing width at EVERYTHING. Though if you want to use just EM on every element (there are times you're just stuck doing that), do the math and use sizes that keep the math even. Let's say you wanted a max-width of 60em body-relational. If your h1 are 200% declare 30em on h1, if your h2 are 150% declare 20em on h2, if your h3 are 125% declare 48em. It often really helps to keep your sizes factors of the common primes; in this case 2*2*3*5 = 60 so it's divisible by 2,3,4,5. (there's a reason the ancient Summerians used base 60, something retained for use in time and navigation even in the age of metric and dumbass "decimal for everything" BS -- NOT a fan of metric or decimal, ooh we haz tan fingarz, let's base it on that?!?) Usually I just use that math for paddings. 0.5em, 0.667em (close enough for gov't work), 0.8em respectively.