Fluid Layout

Developer
Anthony Raffini
Size
1,794 Kb
Views
32,384
  1. Fluid Layout Previews
  2. Fluid Layout HTML Codes
  3. Fluid Layout CSS Codes

How do I make an fluid layout?

What is a fluid layout? How do you make a fluid layout? This script and codes were developed by Anthony Raffini on 12 September 2022, Monday.

Fluid Layout Previews
IQ Test

Fluid Layout - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Fluid Layout</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <main> <header> <h1>The greatest website in the world.</h1> </header> <article> <section class="col1"> <h2>1</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea id, deserunt, possimus eveniet mollitia aliquid non, blanditiis, incidunt dolore corrupti similique. Maxime sint culpa incidunt ducimus soluta omnis, eaque enim!</p> </section> <section class="col2"> <h2>2</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea id, deserunt, possimus eveniet mollitia aliquid non, blanditiis, incidunt dolore corrupti similique. Maxime sint culpa incidunt ducimus soluta omnis, eaque enim!</p> </section> <section class="col3"> <h2>3</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea id, deserunt, possimus eveniet mollitia aliquid non, blanditiis, incidunt dolore corrupti similique. Maxime sint culpa incidunt ducimus soluta omnis, eaque enim!</p> </section> </article> <footer> <p>&copy; 2016</p> </footer>
</main>
</body>
</html>

Fluid Layout - Script Codes CSS Codes

main { background: teal; color: white; margin: 0 auto; width: 90%;
}
section { float: left; padding: 2%;
}
.col1 { background: red; width: 22%; margin-right: 1%;
}
.col2 { background: yellow; width: 22%; margin-left: 1%; margin-right: 1%;
}
.col3 { background: green; margin-left: 1%; width: 40%;
}
footer { clear: both;
}
Fluid Layout - Script Codes
Fluid Layout - Script Codes
Home Page Home
Developer Anthony Raffini
Username rottingroom
Uploaded September 12, 2022
Rating 3
Size 1,794 Kb
Views 32,384
Do you need developer help for 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!

Anthony Raffini (rottingroom) Script Codes
Name
Anthony Raffini
JS Basics Random Images
Dropcap
A Pen by Anthony Raffini
Functions with no arguments
SVG
Main Navigation
Box Model Properties
Position Static
Additional Box Model Properties
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!