1px | Drawing a 1px dot in various environments | Configuration Management library

I have the following code (also pasted below), where I want to make a layout of two columns. In the first one I am putting two images, and in the second displaying some text.

In the first column, I want to have the first image with width:70% and the second one with position:absolute on it. The final result should be like this

As you see the second image partially located in first one in every screens above to 768px.

I can partially locate second image on first one, but that is not dynamic, if you change screen dimensions you can see how that collapse.

But no matter how hard I try, I can not achieve this result.

I am trying to show only the first two rows of a CSS GRID.
The width of the container is unknown therefore it should be responsive.
Also the content of each box is unknown.

My current hacky solution is to define the following two rules:

• use an automatic height for the first two rows
• set the height of the next 277 rows to 0 height

grid-auto-rows: auto auto 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0;

I tried repeat() like this: grid-auto-rows: auto auto repeat(277, 0px) but unfortunately it didn't set the height to 0.

Is there any clean way to repeat height 0?

EDIT Keep in mind that each cell can have a different width and height. This is not the same thing as this post: CSS-only masonry layout, see guide lines of the reference picture:

there are about 19 columns and 17 rows made by guide lines and tiles placed in virtual 5×5 base grid overlap it in both axis.

I want something between a grid and a flex layout. Grids are limited by cell size and flex is more powerful, but (what I know of it) is limited to direction. I want to have different cell sizes, each 5 of them summing to the same width, and 5 columns summing to the same height. Like the image below.

Is there any way of achieving a similar layout using CSS?

This is all I got until now:

HTML:

I tried stopping the column overflow with max-height, max-width, but it doesn't seem to work.

I've made three columns with CSS Grid. One for the nav section, one for the left column and one for the right column. the left column section keeps overflowing over the nav section and the right column section as shown in the screenshots.

What I'm trying to achieve:

What happens:

So I have this script which takes the data from a form and append it in to a HTML div.

To be able to see through to the other side what I want to do is make the circle area transparent so you are able to see through to the background image.

How would this be done?

Is there a way to do that?

https://jsfiddle.net/r95sy2fw/

This image is what I am trying to replicate in the code.

How do I make it transparent like that?

The snippet I provided currently looks like this:

I have an input range in a div contained in an outer div that is smaller than the inner div. The final result is that my inner div scrolls horizontally (because the outer dive has overflow: scroll), and the input range is its child.

To customize the range, I removed the appearance in CSS with appearance: none. Now, here is what happens. When I check it in Chrome developer's tool (actually I use Brave, but I'm guessing it is the same in Chrome as I tested in Chromium, and it is the same) with the smartphone option active, 99% of the time if I try to move the range handle it moves the whole div with it. Now, if I disable the smartphone option, it works just fine. Also, if I keep the smartphone option and remove the appearance: none from CSS, it also works just fine, but my customizations to the range disappear. Does anyone know what is going on?

PS.: in Firefox, the input range doesn't work as long as I keep the smartphone option on (no matter if I have the appearance property or not).

Here is an animated gif of what I mean: First, I have the described above with the input range with no appearance. It works fine, I can move the scrollable div and move the input range handle independently. Then I put the appearance: none to the input range (notice the formatting of the input range changes), now I can't move the input range handle independently from the scrollable div anymore. Finally, remove the appearance from the input range, and everything goes back to normal (but my customizations are gone)

Here is the code, but you can only simulate by using the developer's tool with the smartphone option active, where you can simulate the touch.

I have two tables of size 7cm×15cm that I want to export to a pdf file, of A4 portrait paper size, using the browser's "Save to PDF" option in its print tool.

Ideally, I want to vertically center the two tables on the A4 paper. But if that is not possible to do, I would like them to be positioned on the same place in the page.

At the moment, for some reason, the two tables are not positioned at the exact place on the page, as I want them to (see in the image below).

The html code is the following:

I have a table style that renders fine when its given enough space:

However, when the width of the parent container is not wide enough the table is hidden:

I can fix this by adding display: block on the table. This will add a horizontal scrollbar:

However, this causes the header to not take up available space when the parent container is very wide:

Is there a way I can get the scrollbar to appear when the parent container is too small, get the header to take up the available space and maintain the look and feel of the table?