Fluid Layout with Float

Developer
Jemma Riedel
Size
1,785 Kb
Views
16,192
  1. Fluid Layout with Float Previews
  2. Fluid Layout with Float HTML Codes
  3. Fluid Layout with Float CSS Codes

How do I make an fluid layout with float?

What is a fluid layout with float? How do you make a fluid layout with float? This script and codes were developed by Jemma Riedel on 20 September 2022, Tuesday.

Fluid Layout with Float Previews
IQ Test

Fluid Layout with Float - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Fluid Layout with Float</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>A Site</h1>
</header> <article> <section class="col1"><h2>1</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi esse voluptatem error omnis rerum distinctio dolore repellendus quas atque, molestias delectus saepe tempore perspiciatis provident dolorem? Natus sit, quia aliquid.</p> </section> <section class="col2"><h2>2</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi esse voluptatem error omnis rerum distinctio dolore repellendus quas atque, molestias delectus saepe tempore perspiciatis provident dolorem? Natus sit, quia aliquid.</p> </section> <section class="col3"><h2>3</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi esse voluptatem error omnis rerum distinctio dolore repellendus quas atque, molestias delectus saepe tempore perspiciatis provident dolorem? Natus sit, quia aliquid.</p> </section> </article> <footer> <p>&copy; 2016</p> </footer>
</main>
</body>
</html>

Fluid Layout with Float - Script Codes CSS Codes

main{ background: cornflowerblue; width: 90%; margin: 0 auto;
}
section{ float: left; padding: 2%;
}
.col1{ background: slategrey; margin-right: 1%; width: 22%;
}
.col2{ background: pink; width: 22%; margin-left: 1%; margin-right: 1%;
}
.col3{ background: green; width: 40%; margin-left: 1%;
}
footer{ clear: both;
}
Fluid Layout with Float - Script Codes
Fluid Layout with Float - Script Codes
Home Page Home
Developer Jemma Riedel
Username jxqr97
Uploaded September 20, 2022
Rating 3
Size 1,785 Kb
Views 16,192
Do you need developer help for Fluid Layout with Float?

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!

Jemma Riedel (jxqr97) Script Codes
Name
Jemma Riedel
Fixed Layout with Float
CodePen Embed
Section B
Banner ads
Section A
Bio
Portfolio
Portfolio 2.0 attempt
RWD Conversion Practice
Create amazing marketing copy 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!