CODEWITHSUNDEEP
cssfluid-layout
flks
flks

Reputation: 682

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?

image 

<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>

Upvotes: 2

Views: 131

Answers (2)

flks
flks

Reputation: 682

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/

Upvotes: 0

Roope
Roope

Reputation: 4507

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/

Upvotes: 0

Related Questions