CSS Data Type - <length-percentage>

CSS data type <length-percentage> represents a value that may be either a <length> or a <percentage>.

Syntax

<length-percentage> = <length> | <percentage>

CSS <length-percentage> - Basic Example

In the following example, the <length-percentage> datatype is used to set the margin-left of the content area and the width of the sidebar, enabling a responsive layout design with a specific percentage in relation to the parent container.

<html>
<head>
<style>
   body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
   }
   header {
      background-color: #333;
      color: white;
      text-align: center;
      padding: 20px 0;
   }
   .sidebar {
      float: left;
      width: 25%; /* Using percentage-based width */
      background-color: #f0f0f0;
      padding: 20px;
   }
   .content {
      margin-left: 20%; /* Matching the sidebar's width */
      padding: 20px;
   }
   footer {
      clear: both;
      background-color: #333;
      color: white;
      text-align: center;
      padding: 10px 0;
   }
</style>
</head>
<body>
<header>
   <h1>Header</h1>
</header>
<div class="sidebar">
   <h2>Sidebar</h2>
   <p>This is the sidebar content.</p>
</div>
<div class="content">
   <h2>Main Content</h2>
   <p>This is the main content area.</p>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
</div>
<footer>
   <p>© 2023 Website</p>
</footer>
</body>
</html>

CSS <length-percentage> - Using in calc()

Following example demonstrates using calc() function where percentage is resolved to a length.

   
<html>
<head>
<style>
   /* Using length-percentage data type within calc() */
   .container {
      display: flex;
   }
   .left {
      width: calc(30% - 20px); /* 30% width minus 20px gap */
      height: 20px;
      background-color: red;
      padding: 10px;
   }
   .right {
      flex: 1;
      background-color: blue;
      padding: 10px;
   }
</style>
</head>
<body>
<div class="container">
   <div class="left"></div>
   <div class="right"></div>
</div>
</body>
</html>
Advertisements