Centered div and fluid left padding over the container

问题

I have a centered red div (blue) with a max width (1240px) in my layout and I search to make this in CSS. The logo area (purple) from the left of the centering area (blue) is 300px. At the left of this point, in red, it will be fluid (whatever the screen resolution you have).

(btw, that's the same thing for the lightgray div just below)

Do you have an idea to do that?

<header>
   <div id="logo">
      <div class="w">
         <a href="#">Website name</a>
      </div>
   </div>

   <div class="wrap">
      <div class="r">
         <nav id="menu">
            <ul>
               <li><a href="#">link</a></li>
               <li><a href="#">link</a></li>
               <li><a href="#">link</a></li>
            </ul>
         </nav>
         <nav id="social">
            <ul>
               <li><a href="#">link</a></li>
               <li><a href="#">link</a></li>
            </ul>
         </nav>
      </div>
   </div>
</header>

回答1:

Not exactly sure what you are after other than something that depends on the window size or resolution, so, does using percentages help here? You might know this allright but you can use percentages in css, in margins and paddings and widths and so on. This is directly dependent on the window size or resolution and scales?

http://mattsnider.com/css-using-percent-for-margin-and-padding/

回答2:

Solved with a :before pseudo-class on the #logo element.

#logo:before{content:""; position:absolute; top:0; right:100%; width:1000%; height:100%; background:red;}

http://jsfiddle.net/Flayks/fUf2z/

来源：https://stackoverflow.com/questions/17638475/centered-div-and-fluid-left-padding-over-the-container