W3C home > Mailing lists > Public > www-style@w3.org > September 2010

Re: Suggestion > CSS > Pseudo element > Container

From: Jens O. Meiert <jens@meiert.com>
Date: Tue, 7 Sep 2010 15:31:53 -0700
Message-ID: <AANLkTinALS1=4t5idv1e+L66fX2RCy0x64GKUHTPma1H@mail.gmail.com>
To: pedro.amaral.couto@gmail.com
Cc: www-style@w3.org
(+www-style@w3.org—top-posting for context)

> The header and the footer should fill the whole width of the page with a
> dark color, but their contents should be limited by a rectangular space
> with the same width of the body: http://a.imagehost.org/0716/img_6.png

There are several ways to achieve this without “hacking” or requiring
a new pseudo-element. The solutions depend on the (minimum) markup of
the document in question as well how you want to fill what.

For instance,

#header, #footer { background: black; text-align: center; }
#content { margin: auto; width 50%; }

could do the trick in some cases, variations thereof in others.



On Tue, Sep 7, 2010 at 3:08 PM, Pedro Amaral Couto
<pedro.amaral.couto@gmail.com> wrote:
> On Mon, 2010-09-06 at 22:54 -0700, Jens O. Meiert wrote:
>> > I'm sending this message to make a suggestion for CSS: a pseudo element
>> > to create a container inside a element, wrapping their contents.
>>
>> Would you mind elaborating: why?
>
> HTML:
> «
> <!DOCTYPE html>
> <html lang="en">
>        <head>
>                ...
>        </head>
>
>        <body>
>                <div id="head" class="head">
>                        <span id="site-title">Title</span>
>                        <ul id="site-nav" class="nav">
>                                <li><a href="">Home</a></li>
>                        </ul>
>                </div>
>
>                <div id="body" class="body">
>                        Contents
>                </div>
>
>                <div id="foot" class="foot">
>                        <p>Footer</p>
>                </div>
>        </body>
> </html>
> »
>
> The header and the footer should fill the whole width of the page with a
> dark color, but their contents should be limited by a rectangular space
> with the same width of the body: http://a.imagehost.org/0716/img_6.png .
> The layout should be fluid. How do you do that without changing the HTML
> code and avoiding unnecessary page scrolls? I want to avoid that:
> «
> ...
>        <div id="mast-head">
>                <div id="head" class="head">
>                        ...
>                </div>
>        </div>
>
>        ...
>
>        <div id="mast-foot">
>                <div id="foot" class="foot">
>                        ...
>                </div>
>        </div>
> ...
> »

-- 
Jens O. Meiert
http://meiert.com/en/
Received on Tuesday, 7 September 2010 22:32:43 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:20:31 GMT