We Keep Coding

Background does not spans entirely

I had made css pre-loader which has a some-colored background and a bouncing ball. The background however doesn't spans the window entirely.The page before which the preloader appears is scrollable, and when I try to reload the page, the preloader background doesn't cover the entire page, but only till the window size from the top.
The preloader code was mentioned in this question: Preloader does not fade out online
Help appreciated.

Change position: absolute; to position: fixed; and add width: 100%;.
If it doesn't fill the whole page use height: 100vh; instead of a percentage value.
So #loader should look something like this:
#loader {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100vh;
background-color: #0f2338;
z-index: 99;
}

Invisible div to the browser

I need to make a div invisible to the browser. I mean, i have a div which it's something like a mark and i have another div that contain a google maps.
I put the next code for better understanding.
<div id="marc" class="marco"></div>
<div id="canvas-map"></div>
Style:
.marco{
position: absolute;
width: 100%;
height: 100%;
left: 0;
bottom: 0;
z-index: 10;
background: url("vintaje-montaje.png") no-repeat;
background-size: 100% 100%;
}
The problem is the next: the div than works us a mark ("#marc") works fine. It's look fine. But as is ahead of the other div, i can't use the google maps.
I thought use jQuery and use e.preventDefault() when the mouse is over the div what not work.
Help me please.
Thanks and forgive me for my bad English.

pointer-evens: none will allow your mouse / touch events to pass through .marco to the underlying elements:
.marco{
position: absolute;
width: 100%;
height: 100%;
left: 0;
bottom: 0;
z-index: 10;
background: url("vintaje-montaje.png") no-repeat;
background-size: 100% 100%;
pointer-events: none;
}
See browser support.

Allow float element to overflow horizontally

I have the following structure:
<div id="hold">
<div id="hold-left">content</div>
<div id="hold-right">content</div>
</div>
hold-left floats to the left and hold-right floats to the right. The widths are 40% and 55% when the page is loaded. The thing is, hold-right is a sort of preview of something and the user needs to be able to resize it.
This is easily done using JavaScript (the user selects a zoom level radio button), however the issue I am now facing is that, if it is enlarged, it drops down beneath hold-left. What I'd like it to do is float over freely to the outside of the parent div.
How do I go about this? Can it be done through CSS at all, or do I need to dynamically resize the parent every time I resize hold-right?

Have you considered using a left margin on .hold-right?
.hold-left{
float:left;
width:40%;
}
.hold-right{
margin-left:45%;
}
Also, generally you should use classes, not IDs.

You can try with display: table, and table-cell.
The table will need to be 100% width and no width specified for table-cell. Then the content will "resize" the cells.
Otherwise, you will need to use javascript to update both cells.

Use position property in css. Checkout this
position: relative; in the parent.
position: absolute; in the each child.
#hold {
position: relative;
}
#hold-left {
position: absolute;
left: 0;
width: 100px;
height: 100px;
background: red;
}
#hold-right {
position: absolute;
right: 0;
width: 100px;
height: 200px;
background: yellow;
}
#zoomLevelSelector {
position: absolute;
top: 0;
left: 0;
z-index: 0;
}

Cover entire page with layer

I have pretty complicated one page application, which loads abot 20 seconds.
During loaiding I would not like to show page to user.
So, I have created a layer with 100% height and 100% width, maximum z-index and position absolute. I append this layer before loading starts to the body.
$(loaderHTML).appendTo('body');
#mainLoader {
z-index: 1000;
width: 100%;
height: 100%;
background: rgb(32, 35, 42);
position: absolute;
top: 40px;
}
Layer does the job - it covers the whole page in the beginning, but then, when new elements are created on the page and height of the page becomes bigger, users see not covered elements at the bottom.
How can I make layer that covers whole page even if page changes it's height?

EDIT: absolute position doent't work, but fixed does. Dont't know why
#mainLoader {
z-index:1000 ;
width:100 %;
height:100 %;
background: rgb(32 ,35 ,42 );
position: fixed;
top: 0%;
left: 0%;
overflow: hidden;
}

try this
#mainLoader {
z-index: 9999;
background: rgb(32, 35, 42);
position: absolute;
top: 40px;
bottom: 0;
left: 0;
right: 0;
}

Surround a responsive image with divs

I have an image that I want to center in the middle of a div, the div can grow and shrink according to the size of the window, the image can also differ in size and should never be larger than the surrounding div.
I have managed to do this by using the following HTML:
<div class="imgspace">
<img src="/variable.jpeg">
</div>
CSS:
.imgspace {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.imgspace img {
position: absolute;
margin: auto;
max-width: 100%;
max-height: 100%;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
Now I want to implement a simple set of controls for the image. They should be layed out in three divs surrounding the image on the left, bottom and right side. The divs should grow and shrink with the image as it changes, both considering viewport size changes as well as actual image size.
Is this possible to achieve using only CSS or do I have to involve javascript?
Here's the starting point jsfiddle. I have intentionally left out the three surrounding divs since the placement in the DOM does not matter for me.

I think you need to reserve some space for left, right and bottom elements.
In my example, I am reserving 10% for the #left and #right elements, leaving the img with a width 80%. Also, reserved 10% height for the #bottom element.
Hopefully this is what you are looking for: http://jsfiddle.net/6q4Ls/2/
Drag the separators to see how the elements react.
Another solution using elements outside your container, that seems simpler:
http://jsfiddle.net/6q4Ls/5/
Edit
Using fixed size http://jsfiddle.net/6q4Ls/9/
This might not work in all browsers, as I am using the calc() function.
div.imgspace img {
position: absolute;
margin: auto;
max-width: calc(100% - 200px);
max-height: calc(100% - 100px);
top: 0; right: 100px; bottom: 100px; left: 100px;
}