A clean way of adding width boundary in HTML markup
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-bounda开发者_运维问答ry 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.
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.
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
加载中,请稍侯......
精彩评论