CODEWITHSUNDEEP
htmlcss
somdow
somdow

Reputation: 6318

Percentage width and fixed inner width problems

Ok so long story short, A client of mine had me a do a project where, the design he specifically wanted called for a header wrapper of 100% width, and the inner div that contains the logo is 1300px width.

The problem is that for example, on my 23 in screens, its fine, shows how its supposed to, but on smaller screens, theres a huge gap and the inner divs of the wrapper div are all misaligned.

So for example say we have two divs, inner div is RED, outer div is DARK blue, and background is GREEN, on big screens, i get this(which is what i want)

    -------------------------------------------------------------------
   |      -----------------------------------|                         |
   |      |                                  |          end Of window->|         
   |      |red centered in the middle(1300px wide)   green **not** seen|
   |      -----------------------------------                          |
   |        wrapper header div @ 100% (DARKBLUE)                       |
   | ------------------------------------------------------------------

Now, on this above example, on the header, you cant see the green because the header wrapper div is 100%

Now on smaller screens, like my13'mac/iphone/sammy tablet for example

i get this

------------------------------------------------------------------------------|
-----------------------------------|      |                                   |
|                                  |      |     endOf parent header div       |  
|      red                         |      |  <--pushed all the way left       |
-----------------------------------       |                                   |
  wrapper header div @ 100% (DARKBLUE)    |            GREEN                  |                                   
------------------------------------------------------------------------------|

So what im trying to illustrate is that, on smaller screens, the center div is pushed all the way left, and green is shown....

any ideas as to why? again on all big screens its fine, on smaller ones, it breaks...

the css i have applied to these is very simple.

the RED div is: 

#topRow{
    width:100%;
    height:120px;

    background-image:url(../../images/menuStripBg.png);
    background-repeat:repeat-x; 

}

the inner div (DARKBLUE) is:

#topRowInner{
    min-width:1300px;
    margin:0px auto;    
}

Now im ASSUMING that the problem is that, on smaller screens, since the width on the inner(dark blue) div is 1300px; that the smaller screens resolution is less than 1300, the screen at 100% throws it off, in essence, it cant center the 1300 if the parent wrappers 100% is less than 1300.....

not sure if that makes any sense....

in any case, if this is the problem, any idea how to get around this?

if its not the problem, then any tips/hints etc i gladly appreciate.

Thanks in advanced.

Upvotes: 0

Views: 388

Answers (1)

NGLN
NGLN

Reputation: 43649

Assuming your ascii-example and ignoring the further description of your question, I think you are searching for something like this solution (widen and narrow the window).

You can also replace the position, left and margin-left styles from the topRowInner div with margin: 0 auto; as in your own css, but that will not center it when the window is smaller then 1300 pixels.

Upvotes: 1

Related Questions