CSS ONLY squared div in fluid layout

Developer
Mirco Babini
Size
1,631 Kb
Views
34,408
  1. CSS ONLY squared div in fluid layout Previews
  2. CSS ONLY squared div in fluid layout HTML Codes
  3. CSS ONLY squared div in fluid layout CSS Codes

How do I make an css only squared div in fluid layout?

What is a css only squared div in fluid layout? How do you make a css only squared div in fluid layout? This script and codes were developed by Mirco Babini on 16 July 2022, Saturday.

CSS ONLY squared div in fluid layout Previews
IQ Test

CSS ONLY squared div in fluid layout - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS ONLY squared div in fluid layout</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="playground">PLAYGROUND</div>
<!-- first way -->
<div id="container"> <div id="element"> some text </div>
</div>
<!-- second way (better) -->
<div id="simpler"> text
</div>
</body>
</html>

CSS ONLY squared div in fluid layout - Script Codes CSS Codes

body{ max-width: 900px; border: 2px solid #ccc;
}
body .playground{ float: right; color: #000; margin: 10px 10px 0 0; color: #ccc;
}
#container { display: inline-block; width: 50%; background-color: red;
}
#element { width: 50%; height: 0; padding-bottom: 50%; background-color: silver;
}
#simpler{ background-color: green; height: 0; width: 50%; padding-bottom: 50%;
}
CSS ONLY squared div in fluid layout - Script Codes
CSS ONLY squared div in fluid layout - Script Codes
Home Page Home
Developer Mirco Babini
Username mircobabini
Uploaded July 16, 2022
Rating 3
Size 1,631 Kb
Views 34,408
Do you need developer help for CSS ONLY squared div in fluid layout?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Mirco Babini (mircobabini) Script Codes
Name
Forkable Sandbox for Ionic Templates
A Pen by Mirco Babini
Ionic Single Page Scrollable Sections with Tabs on Top by Mirco Babini
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!