Basic Fluid Grid Example

Developer
Elyse Holladay
Size
2,462 Kb
Views
8,096
  1. Basic Fluid Grid Example Previews
  2. Basic Fluid Grid Example HTML Codes
  3. Basic Fluid Grid Example CSS Codes

How do I make an basic fluid grid example?

What is a basic fluid grid example? How do you make a basic fluid grid example? This script and codes were developed by Elyse Holladay on 27 December 2022, Tuesday.

Basic Fluid Grid Example Previews
IQ Test

Basic Fluid Grid Example - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Basic Fluid Grid Example</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="body">
<div class="container"> <div class="label">turn this 960px fixed layout to fluid!</div> <div class="main-column"> <span class="label">.main-column</span> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint itaque quis numquam recusandae vel quibusdam voluptatum dolorum nostrum voluptatibus ratione nesciunt molestias in maxime ipsum cumque rerum repellat voluptatem delectus!</p> <div class="images"> <img src="http://placekitten.com/500/250" class="kitten"> <img src="http://placekitten.com/500/250" class="kitten"> <img src="http://placekitten.com/500/250" class="kitten"> </div> </div> <div class="sidebar"> <span class="label">.sidebar</span> <ul> <li>Nav Item</li> <li>Nav Item</li> <li>Nav Item</li> <li>Nav Item</li> <li>Nav Item</li> </ul> </div>
</div>
</div>
</body>
</html>

Basic Fluid Grid Example - Script Codes CSS Codes

.container { width: 960px; /* context of our children columns */ /* what is the new width here? */ padding-bottom: 40px; /* give some space at the bottom of the content */ margin: 0 auto; /* center the container on the page; top and bottom 0 margin, right and left auto margin */
} /* clearfix to contain the main col and sidebar */ .container:after { content: ""; visibility: hidden; display: block; height: 0; clear: both; }
.main-column { float: left; width: 640px; /* target */ /* new width is: target ÷ context of parent container = ??? */ margin: 0 40px; /* new margins are: target of 40px margin ÷ context of parent container = ??? */
}
.sidebar { float: left; width: 200px; /* target */ /* new width is: target ÷ context of parent container = ??? */ margin-top: ; /* what margin would we add here to align with the main column top margin? */
}
/* Responsive Styles ---------------------------- */
img { /* what do we add to make images never scale larger than 100% of their actual size? */}
.kitten { /* how would we make our kitten images be smaller than their actual size? */}
/* add test media queries at min-widths 300px, 700px, and 1100px to change the background color of the body element */
/* at 300px, we don't need to float anything! the only media query here we need is to test the background color */
/* add a media query at a min width of 700px to float the main column and sidebar */
/* add a media query at a min width of 1100px to float the 3 kitten images side by side and make them 30% wide */
/* Styles/colors ---------------------------- */
body { font-family: Arial, sans-serif; color: white;
}
.main-column { background: #20568c;
}
.sidebar { background: #001F3F;
}
.container { background: #39CCCC;
}
.label { display: block; text-align: center; text-transform: uppercase; font-weight: bold; width: 100%; padding: 20px 0;
}
ul li {list-style-type: none;}
Basic Fluid Grid Example - Script Codes
Basic Fluid Grid Example - Script Codes
Home Page Home
Developer Elyse Holladay
Username elyseholladay
Uploaded December 27, 2022
Rating 3
Size 2,462 Kb
Views 8,096
Do you need developer help for Basic Fluid Grid Example?

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!

Elyse Holladay (elyseholladay) Script Codes
Name
Specificity Test
Sassy Buttons
Style color palettes with cssgrid
D360 Filter Prototype - Old Style
Start a new Grid Example
A Pen by elyse holladay
4 Basic Naming with Classes
A Pen by elyse holladay
X Floating Examples
Success meters
Create amazing video scripts 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!