Flexible Content in CSS

Prevent Overlapping

Let’s have the following website that displays the CSS logo as an image. The image is displayed in its original size.

flexible_content_1

The page is produced by the the following html and css file:


<!DOCTYPE html>
<html>
<head>
<title>CSS overlapping</title>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div class="imageholder">
<div class="centering">
<img class="img" src="css.jpg">
</div>
</div>
</body>
</html>

view raw

index.html

hosted with ❤ by GitHub


html, body {
background-color: lightgrey;
margin: 0;
}
.imageholder {
position: absolute;
margin: 10% auto;
width: 100%;
height: 60%;
background-color: darkblue;
}
.centering {
margin: 0 auto;
width: 40%;
height: 100%;
background-color: black;
}

view raw

main.css

hosted with ❤ by GitHub

As soon as the page is decreased, the image overlaps its intended area (black area) which is not desired.

flexible_content_2

The solution to this problem is to introduce both the properties max-width and max-height. They will prevent the image from overlapping to other areas.


.img {
max-width: 100%;
max-height: 100%;
}

view raw

main.css

hosted with ❤ by GitHub

Keeping aspect ratio

Keeping aspect ratios in responsive websites is primarily important for videos and images. In the following it is show how the aspect ratio can be kept. Again there is a index.html and a main.css:


<!DOCTYPE html>
<html>
<head>
<title>CSS aspect ratio</title>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div class="container">
<div class="element">
</div>
</div>
</body>
</html>

view raw

index.html

hosted with ❤ by GitHub


html, body {
background-color: lightgrey;
margin: 0;
}
.container {
position: relative;
height: 0;
padding-bottom: 25%;
background-color: red;
}
.element {
position: absolute;
height: 100%;
width: 100%;
background-color: darkblue;
}

view raw

main.css

hosted with ❤ by GitHub

The relevant part here is to set height:0 and padding-bottom: 25% in the container selector. This will create a container that is 4 times as width as height because a padding is always calculated of the elements width. The aspect ratio is even kept if the browser size is changed.

Understanding Docker volumes

Docker volumes was one of the last things I understood of Docker. As you can get started with Docker quite conveniently without using any volumes I never took the time to really understand them. But using volumes gives you the opportunity to work with data in Docker. Primarily, volumes offer persistent storage and shared state. So it’s high time to have a look at Docker volumes.

Volumes are used to persist data like database files, log files or any other container-independent data outside of a Docker container. Volumes map directories in a container to a defined directory on the host.

There exist two types of Docker volumes, bind-mount volume and managed volume. The former maps any user-specified directory or file on the host operating system. The latter uses internal Docker locations that are managed by Docker itself.

A bind-mount volume is created via the v-flag in the docker run command as follows:

docker run -it -v ~/shared:/tmp/data ubuntu /bin/bash

This will map the /tmp/data directory inside the container to the shared directory inside the local users directory on the host (~ is the shortcut for the local users directory in windows). All locations must be specified with absolute paths. This can be checked via:

docker inspect --format='{{json .Mounts}}'

Once the container is started, you can navigate to the /tmp/data directory and all files contained in the ~/shared directory on the host will be displayed. In the same way, single files can be mapped as well. Read-only volumes can be specified by appending :ro to the docker volume.

Bind-mount volumes have the disadvantage that they make the container not portable to any other host and volumes of different containers can conflict with each other. Thus, its best to avoid these volumes in generalized platforms and use Docker-managed volumes instead. Managed volumes are created via the v-flag as well, but without specifying a directory inside the container:

docker run -it -v ~/shared: /bin/bash

Besides persistent storage, volumes are used to share data between different containers. This can be achieved in two ways. Either each container has a bind-mount volume to the same location or managed volumes are shared between them. The former is quite straightforward whereas for the latter the —–volumes-from flag is used. This flag is used to copy a managed volume by a so called volume container into each container. A volume container is a single container that only defines a volume. This looks as follows:

docker run -d --volumes-from vc_shared ubuntu

Docker can’t delete bind-mount volumes because this is outside of its scope. However, care must be taken to always remove managed volumed when a container is deleted. This is done via the v-flag:

docker rm -v ubuntu

Using this v-flag option is really important. If deleting a container without this option, the managed volume becomes orphan and subsequently requires any manual steps to be removed.

Centering elements in CSS

A common problem in CSS is centering elements wherefore various approaches exist. But often if I need one at a time, no one comes to mind. So I summarize here briefly how to center elements in CSS horizontally and vertically.

Consider the following simple website, which shows a colored box.

website_centering

The code for the index.html looks as follows


<!DOCTYPE html>
<html>
<head>
<title>CSS centering</title>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div class="box bluebox"></div>
</body>
</html>

view raw

index.html

hosted with ❤ by GitHub

and the code for the cascading style sheet named main.css is as follows:


body {
height: 2000px;
}
.box {
height: 100px;
width: 100px;
margin-bottom: 10px;
}
.bluebox {
background-color: blue;
}

view raw

main.css

hosted with ❤ by GitHub

By the way, a modern text editor for web design is brackets. I’m using this editor for designing webpages and highly recommend it.

My preferred way to horizontally center the box is by adding the margin property to the selector. The updated CSS looks as follows:


body {
height: 2000px;
}
.box {
height: 100px;
width: 100px;
margin-bottom: 10px;
}
.bluebox {
background-color: blue;
margin: 0 auto;
}

view raw

main.css

hosted with ❤ by GitHub

The values of the property are set to 0 and auto. 0 means that the top and bottom margin are equal to 0. Auto says move left and right in the equal amount that finally centers the box on the page.

Centering the box vertically on the page is as easy as follows:


body {
height: 2000px;
}
.box {
height: 100px;
width: 100px;
margin-bottom: 10px;
}
.bluebox {
background-color: blue;
position: absolute;
top: 50%;
margin-top: -50px;
}

view raw

main.css

hosted with ❤ by GitHub

Centering the box horizontally as well as vertically is a bit more complicated. But the trick here is to add a container element which is vertically centered and its width is set to 100%. The box is contained in this container and then can be horizontally centered. The code looks as follows:


<!DOCTYPE html>
<html>
<head>
<title>CSS centering</title>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div class="container">
<div class="box bluebox"></div>
</div>
</body>
</html>

view raw

index.html

hosted with ❤ by GitHub


body {
height: 2000px;
}
.box {
height: 100px;
width: 100px;
margin-bottom: 10px;
}
.container {
position: absolute;
top: 50%;
margin-top: -50px;
width: 100%;
}
.bluebox {
background-color: blue;
margin: 0 auto;
}

view raw

main.css

hosted with ❤ by GitHub

Whenever, one is playing with CSS and trying to achieve such things, it it often very helpful to set a background color for the different elements.This gives a good way the „optically“ debug the code and seeing exactly what is going on.