Name: Create a fixed-fluid-fixed layout using CSS calc()
Uploaded: 2016-10-05T21:22:44-05:00
Description: CSS calc() allows you to mix and match units to get real-time calculations. It's useful when you need to size elements but you have some unknown number that you have to account for.

Target empty elements using the :empty pseudo-class

Target Positional Elements Using *-Of-Type CSS pseudo-classes

Create a fixed-fluid-fixed layout using CSS calc()

Dynamically Size Elements with Pure CSS 

Easily Reset Styles With a Single CSS value

Layout Responsive Fluid Columns Using CSS

Control Image Aspect Ratio Using CSS

Learn Advanced CSS Layout Techniques

CSS calc() allows you to mix and match units to get real-time calculations. It's useful when you need to size elements but you have some unknown number that you have to account for.

https://app.egghead.io/api/v1/lessons/css-create-a-fixed-fluid-fixed-layout-using-css-calc/subtitles

Instructor: [00:00] Let's start out by targeting the main element. We'll set its margin left property to five rem. This five rem equals the width of the nav element. For the width, let's take width and we'll set that to a calc function of 100 percent minus 25 rem. Here, the 25 rem comes from the 5 rem width of the nav element plus the 20 rem width of the aside element.

[00:30] When I resize my window, the main element is still positioned in the correct location, and it grows and shrinks depending on the remaining available space. We can take this one step further by repeating this pattern inside of a MIDI query to ensure that the layout functions properly even when the elements change size.

[00:49] If I resize my window, the nav and aside elements shrink, and the main element continues to take up the remaining space, thanks to the calc function.

Create a fixed-fluid-fixed layout using CSS calc()

Share this video with your friends

Course

Learn Advanced CSS Layout Techniques

Where is the code?