0

It's continuation of this question. Can we decentralize div box from the center? But keep zoom on the box.

Two requirements:

  1. Small resolutions (f.i. iPad) it keeps centralized;
  2. Large resolution it takes (f.i. 20% from the left side).

Unfortunately left: -300px; doesn't work. Here is an example.

Code:

<!DOCTYPE html>
<html>
<head>
<style>
#bg-rect-important {
    background-color: #656565;
    width: 100%;
    position: absolute;
    left:0; right:0;
    min-width: 980px;   /* max for iPad */  
    height: 263px;
}

#base-rect-lime {
    background-color: lime;
    height:400px;
    width:940px;
    position: relative; 
    margin: 0 auto;
}
</style>
</head>

<body>
<div class="bg-rect" id="bg-rect-important">
    <div id="base-rect-lime"></div>
</div>
</body>
</html>
Community
  • 1
  • 1
Calm
  • 45
  • 5
  • Have you tried using media queries to target the smaller devices? – gmartellino Mar 16 '13 at 09:44
  • Probably my question "what is it?" will be an answer for you. :) – Calm Mar 16 '13 at 09:47
  • Thank you. It might be an answer for cell phone and iPad, but still... I wish decentralize the box on 20%-30% of an empty space on displays. – Calm Mar 16 '13 at 09:49
  • Are there other ways of resolving the question? It will require me to write 4 css files. Rectangle, square, iPad, cell phone. – Calm Mar 16 '13 at 09:53
  • Am I missing something here? I don't see how this requires more than 1 CSS file: http://codepen.io/cimmanon/pen/JCjav – cimmanon Mar 16 '13 at 13:01

0 Answers0