A clean way of adding width boundary in HTML markup

Question

Take the following markup:

<!DOCTYPE html>
<html>
    <head>
        <title>My test for StackOverflow</title>
    </head>
    <body>
        <header>
            <span>LOGO_WOULD_BE_HERE</span>
        </header>
        <article>
            <h1>The title of my page</h1>
            <p>Blah blah blah</p>
        </article>
        <footer>
            <p>Copyright (c) 2011 The World.</p>
        </footer>
    </body>
</html>

This is all fine, clean and semantic - however, imagine that the main, wrapping block elements need to have a background which takes up the entire width of the page, and your content needs to be within a width boundary (for example a container of min-width: x; max-width: y to allow elasticity).

The 'easy' way would simply be to create a width-boundary class, that you wrap everything in, for example:

<header>
  <div class="width-boundary">
    <h1>The title of my page</h1>
    <p>Blah blah blah</p>
  </div>
</header>

With CSS similar to:

.width-boundary { min-width: 400px; max-width: 960px; margin: 0 auto; }

This is an ugly solution though, as you end up with a bunch of wrappers all over your nice new markup.

I'm keen to hear of any elegant solutions to this - with as little additional as markup as possible and whatever is added should be semantic.

Here is a playground I've setup on JSFiddle.

i have a similar question here: http://stackoverflow.com/questions/5450936/semantic-markup-for-stretchable-header-and-footer/5451985#5451985 it seems that adding a container to contain header and body is common. then footer can stretch all it want and still have a width — corroded, Mar 31 '11 at 07:32
also the end tag of your blahblah p is an h1. just being OC(but i know its just an example) — corroded, Mar 31 '11 at 07:33
and @corroded: why do you tag your question with `semantic`? I see that this tag has no has no wiki summary on SO, so it's pretty open, but I don't see any semantics in your question. Am I wrong? — MarcoS, Mar 31 '11 at 07:38

score 4 · Accepted Answer · answered Mar 31 '11 at 07:48

If you're that concerned about semantics, here's a little improvement to your markup:

<section id="content">
    <article>
        <h1>The title of my page</h1>
        <p>Blah blah blah</p>
    </article>
</section>

Apply the width constraints to #content > article instead:

#content > article {
    min-width: 400px;
    max-width: 960px;
    margin: 0 auto;
}

This way, you can do away with the <div> and the width-boundary class altogether.

score 0 · Answer 2 · answered Mar 31 '11 at 07:50

0

couldn't you just add the class to the article tag?

    <article class="width-boundary">
        <h1>The title of my page</h1>
        <p>Blah blah blah</p>
    </article>

it removes the need for the extra div wrapper

answered Mar 31 '11 at 07:50

GrahamJRoy

1,603
5
26
56

No, the requirement is that the CONTENT of the block element is moved to a central area, whereas the article tag needs to be the full width of the page (background colour for example) – isNaN1247 Mar 31 '11 at 07:54
@beardtwizzle: Your fiddle's CSS defines two background colors for `article`. Do you need it to be red or green? Either way if you use my markup you can apply the respective colors to `#content` and `#content > article` without a hitch, and maintain a reasonable level of markup semantics. – BoltClock Mar 31 '11 at 07:57
@BoltClock, its purely a playground for users to play around with for the purpose of the question, not the markup I'm suggesting - the blanket colour is simply applied to save me writing the header rule separately – isNaN1247 Mar 31 '11 at 08:01

A clean way of adding width boundary in HTML markup

2 Answers2