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
To Continue Learning Please Login
Login with Google