0

I'm trying to do the following: (JSFiddle in the bottom) enter image description here

How it should work:

The yellow box should fill the remaining space and even if the red box have width: 25% it should not be over 330px. If the yellow box (which is filling the remaining space) has width less then 1000px, it should be completely filled by the blue box, but if It has width greater then 1000px, the blue box should have width: 1000px and be centered inside the yellow box.

In the red box I have hide button which hides the left bar, and in the blue one, I have a button which brings back the left bar. When the left bar is hidden, it should look like this: enter image description here

The problems I faced:

  1. When the resolution is width>1800px (for example), the redbox (because of it's max-width is less then 25%) and its not filling the whole container. (Screen of the problem in the fiddle)
  2. [Fixed] I couldn't figure out how to center the bluebox, because it's width is 100%, but the max-width don't let the box be over 1000px.(Screen of the problem, should be centered)

Here is a JSFIDDLE of my problem: JSFIDDLE. Zoom out (using ctrl+mousewheel down) to see the problem as it was in higher resolution.

I've been digging into this problem for 3,5 hours already and couldn't find a answer to my problems.

Deepsy
  • 3,769
  • 7
  • 39
  • 71
  • What exactly do you mean with the first problem? Does the green div not fit the rest of the space? – display-name-is-missing May 08 '14 at 00:33
  • @DanielLisik on higher resolutions, the width of the red box is 330px(which is far less then 25% of 1920 for example), so the redbox will be 10% of the container width for example, so 10% + 75% = 85%, which leaves 15% unfilled space. – Deepsy May 08 '14 at 00:36

1 Answers1

2

To center the element horizontally you need to add the following two CSS properties to the center-right class:

margin-left: auto;
margin-right: auto;

Here is the updated JsFiddle.

Aaron
  • 705
  • 10
  • 19
  • wow, I have tried this few times, but now it worked! Thanks! I really appreciate it! Do you have any suggestions about the first problem? – Deepsy May 08 '14 at 00:39
  • 1
    For the 1st problem, see this SO question and answer; http://stackoverflow.com/questions/1260122/expand-div-to-take-remaining-width. – Aaron May 08 '14 at 00:45