Help with CSS and making a <div> and #passage respond properly to different screensizes

Question

My question is a little complicated, as it revolves around a bigger layout/theme and how that theme behaves with different screensizes.

Using the original Sugarcube 2 theme, i wanted to create 2 image banners, one to the left of the original #passage and one to the right.

whilst this was perfectly possible, appearantly the layout doesn't end up the correct way on other monitors, even some with the same resolution of 1920x1080.

This is despite using percentage values for assign width, height, margin etc.

here is the code (its long, please bear with me):

For the Image-Bar (this is the image bar between the UI and the main passage, the one to the left of the main passage and to the right of the UI bar)(i'm including the code for when the UI bar is stowed):

#image-bar {
	position: fixed;
	z-index: 1;
  	background-color: rgba(0, 0, 0, 1);
	width: 16%;
  	height: 100%;
    bottom: 0.1%;
  	top: 0.1%;
  	margin-left: 14.5%;
  	padding: 1%;
  	padding-right: 2%;
  	transition: left .2s ease-in;
}

#ui-bar.stowed~#story {
	margin-left: 10em;
}
#ui-bar.stowed~#image-bar {
	margin-left: 1.5%;
}

For the Right-Bar (this is the image bar all the way to the right, which is to the right of the main passage)

#right-bar {
	position: fixed;
	z-index: 1;
  	background-color: rgba(0, 0, 0, 1);
	width: 16%;
  	height: 100%;
	left: 82%;
  	bottom: 0.1%;
  	top: 0.1%;
  	padding: 1%;
  	transition: left .2s ease-in;
}

After this, both Image bars are appended to the main document body.

$('<div id="image-bar"></div>').appendTo(document.body);
$('<div id="right-bar"></div>').appendTo(document.body);

The problem is, that sometimes, the #Image-Bar (the one on the left) either gets hidden under the UI-bar (or over, depending on the z-index value). The #Image-Bar does not stick properly to the UI-bar, and also sometimes goes over into the passage, hiding the text at lower resolutions/when minimized.

Is it possible to squeeze the #passage first when making the window smaller, making the test fit the new window size, whilst also avoiding that the #Image-Bar hides behind the UI-bar?

 

Answer 1

A couple of issues and related suggestions:

1. The #ui-bar element has a default fixed width of 17.5em but you are assigning your (left) #image-bar element a margin-left of 14.5%, this is a problem because it is unlikely that those two values will always equal the same number of pixels which in turn will possible cause the #ui-bar and #image-bar elements to overlap.

You need to move the #image-bar element horizontally at least the same fixed distance as the #ui-bar element width.

2. The stowing of the #ui-bar element results in the #story element's margin-left property being changed from the default of 20em to 4.5em, by inserting your #image-bar element between the #ui-bar and #story elements both those margin-left values will need to be adjusted. To complicate the matter your #image-bar element has a percentage based width which means you won't be able to use fixed values for the relevant margin-left properties. 

To get around this issue you will need to use the CSS calc() function to determine the new margin-left property values.

3. You are adding both of your new #image-bar and #right-bar elements to the document body element even though you actually want both of those elements to appear astride the #story element.

I suggest inserting the #image-bar element just before the #story element, and the #right-bar element just after it.

$('<div id="image-bar"></div>').insertBefore("#story");
$('<div id="right-bar"></div>').insertAfter("#story");

 

The following CSS prototype tries to overcome the issues mentioned in points 1 & 2, it uses a left attribute (instead of a margin-left) to position the #image-bar element.

#image-bar {
	position: fixed;
	top: 0;
	left: 17.5em;
	width: 16%;
	height: 100%;
	-webkit-transition: left .2s ease-in;
	-o-transition: left .2s ease-in;
	transition: left .2s ease-in;
}

#story {
	margin-left: calc(20em + 16%);
}

#ui-bar.stowed~#image-bar {
	left: 2em;
}

#ui-bar.stowed~#story {
	margin-left: calc(4.5em + 16%);
}

notes:
a.  I have excluded a number of your other CSS attributes purely to make the example a little clearer, you should re-add those attributes as needed.
b. A more experienced CSS writer may spot web-browser compatibility issues with the above.

Comments

So far, this seems to have fixed it nicely, thank you very much for the detailed and well-written answer!