CS306 - Web Programming: CSS

3. Layout and Positioning

˿ Back to homepage

3.1. Using display

HTML
<h1> Cats world</h1>

<a href="#"> Know more about cats</a> or
<a href="#"> display gallery</a> or
<a href="#"> donate for saving street cats</a>
                    
CSS
a {
    display: block;
}
                     

3.2. Using float

HTML
<h1> Cats</h1>
<img src="../../assets/cat.jpeg" alt="A cat">
<p>
    The cat (Felis catus), commonly referred to as the domestic cat or house cat, is the only domesticated species in the family Felidae. Recent advances in archaeology and genetics have shown that the domestication of the cat occurred in the Near East around 7500 BC. It is commonly kept as a house pet and farm cat, but also ranges freely as a feral cat avoiding human contact. It is valued by humans for companionship and its ability to kill vermin. Its retractable claws are adapted to killing small prey like mice and rats. It has a strong, flexible body, quick reflexes, sharp teeth, and its night vision and sense of smell are well developed. It is a social species, but a solitary hunter and a crepuscular predator. Cat communication includes vocalizations like meowing, purring, trilling, hissing, growling, and grunting as well as cat body language. It can hear sounds too faint or too high in frequency for human ears, such as those made by small mammals. It also secretes and perceives pheromones.Female domestic cats can have kittens from spring to late autumn in temperate zones and throughout the year in equatorial regions, with litter sizes often ranging from two to five kittens. Domestic cats are bred and shown at events as registered pedigreed cats, a hobby known as cat fancy. Animal population control of cats may be achieved by spaying and neutering, but their proliferation and the abandonment of pets has resulted in large numbers of feral cats worldwide, contributing to the extinction of bird, mammal and reptile species.
</p>
                    
CSS
img {
    width: 150px;
    float:left;
    margin: 10px;
    
}
                     

Cats

A cat

The cat (Felis catus), commonly referred to as the domestic cat or house cat, is the only domesticated species in the family Felidae. Recent advances in archaeology and genetics have shown that the domestication of the cat occurred in the Near East around 7500 BC. It is commonly kept as a house pet and farm cat, but also ranges freely as a feral cat avoiding human contact. It is valued by humans for companionship and its ability to kill vermin. Its retractable claws are adapted to killing small prey like mice and rats. It has a strong, flexible body, quick reflexes, sharp teeth, and its night vision and sense of smell are well developed. It is a social species, but a solitary hunter and a crepuscular predator. Cat communication includes vocalizations like meowing, purring, trilling, hissing, growling, and grunting as well as cat body language. It can hear sounds too faint or too high in frequency for human ears, such as those made by small mammals. It also secretes and perceives pheromones.Female domestic cats can have kittens from spring to late autumn in temperate zones and throughout the year in equatorial regions, with litter sizes often ranging from two to five kittens. Domestic cats are bred and shown at events as registered pedigreed cats, a hobby known as cat fancy. Animal population control of cats may be achieved by spaying and neutering, but their proliferation and the abandonment of pets has resulted in large numbers of feral cats worldwide, contributing to the extinction of bird, mammal and reptile species.

3.3. Elements positioning

HTML
<h1>Cat Characteristics</h1>
<div class="content"> 

<p>It was long thought that the domestication of the cat began in ancient Egypt, where cats were venerated from around 3100 BC,[31][32] However, the earliest known indication for the taming of an African wildcat was excavated close by a human Neolithic grave in Shillourokambos, southern Cyprus, dating to about 7500–7200 BC. Since there is no evidence of native mammalian fauna on Cyprus, the inhabitants of this Neolithic village most likely brought the cat and other wild mammals to the island from the Middle Eastern mainland.[33] Scientists therefore assume that African wildcats were attracted to early human settlements in the Fertile Crescent by rodents, in particular the house mouse (Mus musculus), and were tamed by Neolithic farmers. This mutual relationship between early farmers and tamed cats lasted thousands of years. As agricultural practices spread, so did tame and domesticated cats.[30][34] Wildcats of Egypt contributed to the maternal gene pool of the domestic cat at a later time.[35]

The earliest known evidence for the occurrence of the domestic cat in Greece dates to around 1200 BC. Greek, Phoenician, Carthaginian and Etruscan traders introduced domestic cats to southern Europe.[36] During the Roman Empire they were introduced to Corsica and Sardinia before the beginning of the 1st millennium.[37] By the 5th century BC, they were familiar animals around settlements in Magna Graecia and Etruria.[38] By the end of the Western Roman Empire in the 5th century, the Egyptian domestic cat lineage had arrived in a Baltic Sea port in northern Germany.[35]

The leopard cat (Prionailurus bengalensis) was tamed independently in China around 5500 BC. This line of partially domesticated cats leaves no trace in the domestic cat populations of today.[39]

During domestication, cats have undergone only minor changes in anatomy and behavior, and they are still capable of surviving in the wild. Several natural behaviors and characteristics of wildcats may have pre-adapted them for domestication as pets. These traits include their small size, social nature, obvious body language, love of play, and high intelligence. Since they practice rigorous grooming habits and have an instinctual drive to bury and hide their urine and feces, they are generally much less messy than other domesticated animals. Captive Leopardus cats may also display affectionate behavior toward humans but were not domesticated.[40] House cats often mate with feral cats.[41] Hybridisation between domestic and other Felinae species is also possible, producing hybrids such as the Kellas cat in Scotland.[42][43]

Development of cat breeds started in the mid 19th century.[44] An analysis of the domestic cat genome revealed that the ancestral wildcat genome was significantly altered in the process of domestication, as specific mutations were selected to develop cat breeds.[45] Most breeds are founded on random-bred domestic cats. Genetic diversity of these breeds varies between regions, and is lowest in purebred populations, which show more than 20 deleterious genetic disorders.[46] </p>
<button class="subscribe"> subscribe</button>

<h2> Behaviour </h2> 
<p> Outdoor cats are active both day and night, although they tend to be slightly more active at night.[89] Domestic cats spend the majority of their time in the vicinity of their homes but can range many hundreds of meters from this central point. They establish territories that vary considerably in size, in one study ranging 7–28 ha (17–69 acres).[90] The timing of cats' activity is quite flexible and varied but being low-light predators, they are generally crepuscular, which means they tend to be more active near dawn and dusk. However, house cats' behavior is also influenced by human activity and they may adapt to their owners' sleeping patterns to some extent.[91][92]

Cats conserve energy by sleeping more than most animals, especially as they grow older. The daily duration of sleep varies, usually between 12 and 16 hours, with 13 and 14 being the average. Some cats can sleep as much as 20 hours. The term "cat nap" for a short rest refers to the cat's tendency to fall asleep (lightly) for a brief period. While asleep, cats experience short periods of rapid eye movement sleep often accompanied by muscle twitches, which suggests they are dreaming.[93]</p>

<h2 class="target-text"> Sociability</h2>
<p> The social behavior of the domestic cat ranges from widely dispersed individuals to feral cat colonies that gather around a food source, based on groups of co-operating females.[94][95] Within such groups, one cat is usually dominant over the others.[96] Each cat in a colony holds a distinct territory, with sexually active males having the largest territories, which are about 10 times larger than those of female cats and may overlap with several females' territories. These territories are marked by urine spraying, by rubbing objects at head height with secretions from facial glands, and by defecation.[80] Between these territories are neutral areas where cats watch and greet one another without territorial conflicts. Outside these neutral areas, territory holders usually chase away stranger cats, at first by staring, hissing, and growling, and, if that does not work, by short and violent, noisy attacks. Though, cats do not have a social survival strategy or herd behavior, they always hunt alone.[97]

Life in proximity to humans and other domestic animals has led to a symbiotic social adaptation in cats, and cats may express great affection toward humans or other animals. Ethologically, a cat's human keeper functions as if a mother surrogates.[98] Adult cats live their lives in a kind of extended kittenhood, a form of behavioral neoteny. Their high-pitched sounds may mimic the cries of a hungry human infant, making them particularly difficult for humans to ignore.[99] Some pet cats are poorly socialized. In particular, older cats show aggressiveness toward newly arrived kittens, which include biting and scratching; this type of behavior is known as feline asocial aggression.[100]

Redirected aggression is a common form of aggression which can occur in multiple cat households. In redirected aggression, there is usually something that agitates the cat: this could be a sight, sound, or another source of stimuli which causes a heightened level of anxiety or arousal. If the cat cannot attack the stimuli, it may direct anger elsewhere by attacking or directing aggression to the nearest cat, dog, human or other being.[101][102]

Domestic cats' scent rubbing behavior toward humans or other cats is thought to be a feline means of social bonding.[103]</p>

<h2> Hunting and Feeding </h2>

<p> The shape and structure of cats' cheeks is insufficient to allow them to take in liquids using suction. Therefore, when drinking they lap with the tongue to draw liquid upward into their mouths. Lapping at a rate of four times a second, the cat touches the smooth tip of its tongue to the surface of the water, and quickly retracts it like a corkscrew, drawing water upward.[125][126]

Feral cats and free-fed house cats consume several small meals in a day. The frequency and size of meals varies between individuals. They select food based on its temperature, smell and texture; they dislike chilled foods and respond most strongly to moist foods rich in amino acids, which are similar to meat. Cats reject novel flavors (a response termed neophobia) and learn quickly to avoid foods that have tasted unpleasant in the past.[97][127] It is also a common misconception that cats like milk/cream, as they tend to avoid sweet food and milk. Most adult cats are lactose intolerant; the sugar in milk is not easily digested and may cause soft stools or diarrhea.[128] Some also develop odd eating habits and like to eat or chew on things like wool, plastic, cables, paper, string, aluminum foil, or even coal. This condition, pica, can threaten their health, depending on the amount and toxicity of the items eaten.[129]

Cats hunt small prey, primarily birds and rodents,[130] and are often used as a form of pest control.[131][132] Other common small creatures such as lizards and snakes may also become prey.[133] Cats use two hunting strategies, either stalking prey actively, or waiting in ambush until an animal comes close enough to be captured.[134] The strategy used depends on the prey species in the area, with cats waiting in ambush outside burrows, but tending to actively stalk birds.[135]: 153  Domestic cats are a major predator of wildlife in the United States, killing an estimated 1.3 to 4.0 billion birds and 6.3 to 22.3 billion mammals annually.[136]

Certain species appear more susceptible than others; in one English village, for example, 30% of house sparrow mortality was linked to the domestic cat.[137] In the recovery of ringed robins (Erithacus rubecula) and dunnocks (Prunella modularis) in Britain, 31% of deaths were a result of cat predation.[138] In parts of North America, the presence of larger carnivores such as coyotes which prey on cats and other small predators reduces the effect of predation by cats and other small predators such as opossums and raccoons on bird numbers and variety.[139]

Perhaps the best-known element of cats' hunting behavior, which is commonly misunderstood and often appalls cat owners because it looks like torture, is that cats often appear to "play" with prey by releasing and recapturing it. This cat and mouse behavior is due to an instinctive imperative to ensure that the prey is weak enough to be killed without endangering the cat.[140]

Another poorly understood element of cat hunting behavior is the presentation of prey to human guardians. One explanation is that cats adopt humans into their social group and share excess kill with others in the group according to the dominance hierarchy, in which humans are reacted to as if they are at or near the top.[141] Another explanation is that they attempt to teach their guardians to hunt or to help their human as if feeding "an elderly cat, or an inept kitten".[142] This hypothesis is inconsistent with the fact that male cats also bring home prey, despite males having negligible involvement in raising kittens.[135]</p>
</div>
                    
CSS
* {
    box-sizing:border-box;
    }
    
    h1 {
    position: fixed;
    top:0;
    left: 0;
    width:100%;
    background: white;
    z-index: 1;
    padding-block: 15px;
    }
    
    .content p {
    position: relative;
    }
    
    .content p:not(:first-child)::before {
    content: '';
    position: absolute;
    top: -10px;
    left: 0;
    width:100%;
    border-bottom: 3px solid black;
    }
    
    .content {
    z-index: -1;
    margin-top: 100px;
    }
    
    .subscribe {
    float: right;
    position: sticky;
    top:0;
    right:0;
    background-color: yellow;
    border: 1px solid limegreen;
    cursor: pointer;
    z-index: 2;
    }
                     

Try it yourself!

3.4. Multi-column Layouts

HTML
<h1>Cat Breeds</h1>
<div class="cols">
<div class="col col1">
    <img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/4QBXRXhpZgAASUkqAAgAAAACAA4BAgAhAAAAJgAAAJiCAgAIAAAARwAAAAAAAABTaWFtZXNlIGNhdCBvdmVyIHdoaXRlIGJhY2tncm91bmREaWFuYVJ1af/tAHpQaG90b3Nob3AgMy4wADhCSU0EBAAAAAAAXRwCUAAIRGlhbmFSdWkcAngAIVNpYW1lc2UgY2F0IG92ZXIgd2hpdGUgYmFja2dyb3VuZBwCdAAIRGlhbmFSdWkcAm4AGEdldHR5IEltYWdlcy9pU3RvY2twaG90bwD/4QU3aHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLwA8P3hwYWNrZXQgYmVnaW49Iu+7vyIgaWQ9Ilc1TTBNcENlaGlIenJlU3pOVGN6a2M5ZCI/Pgo8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIj4KCTxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+CgkJPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6cGhvdG9zaG9wPSJodHRwOi8vbnMuYWRvYmUuY29tL3Bob3Rvc2hvcC8xLjAvIiB4bWxuczpJcHRjNHhtcENvcmU9Imh0dHA6Ly9pcHRjLm9yZy9zdGQvSXB0YzR4bXBDb3JlLzEuMC94bWxucy8iICAgeG1sbnM6R2V0dHlJbWFnZXNHSUZUPSJodHRwOi8veG1wLmdldHR5aW1hZ2VzLmNvbS9naWZ0LzEuMC8iIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1sbnM6cGx1cz0iaHR0cDovL25zLnVzZXBsdXMub3JnL2xkZi94bXAvMS4wLyIgIHhtbG5zOmlwdGNFeHQ9Imh0dHA6Ly9pcHRjLm9yZy9zdGQvSXB0YzR4bXBFeHQvMjAwOC0wMi0yOS8iIHhtbG5zOnhtcFJpZ2h0cz0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3JpZ2h0cy8iIGRjOlJpZ2h0cz0iRGlhbmFSdWkiIHBob3Rvc2hvcDpDcmVkaXQ9IkdldHR5IEltYWdlcy9pU3Rv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" alt="Siamese Cat">
    <h2>Siamese cat</h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div>
<div class="col col2">
    <img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/4QCPRXhpZgAASUkqAAgAAAACAA4BAgBhAAAAJgAAABIBAwABAAAAAQAAAAAAAABZb3VuZyBjdXRlIGNhdCByZXN0aW5nIG9uIHdvb2RlbiBmbG9vci4gVGhlIEJyaXRpc2ggU2hvcnRoYWlyIHBlZGlncmVlZCBraXR0ZW4gd2l0aCBibHVlIGdyYXkgZnVy/+0ArFBob3Rvc2hvcCAzLjAAOEJJTQQEAAAAAACPHAJQAAdOaXNlcmlOHAJ4AGFZb3VuZyBjdXRlIGNhdCByZXN0aW5nIG9uIHdvb2RlbiBmbG9vci4gVGhlIEJyaXRpc2ggU2hvcnRoYWlyIHBlZGlncmVlZCBraXR0ZW4gd2l0aCBibHVlIGdyYXkgZnVyHAJuABhHZXR0eSBJbWFnZXMvaVN0b2NrcGhvdG8A/+EFYWh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8APD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4KPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyI+Cgk8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPgoJCTxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiIHhtbG5zOnBob3Rvc2hvcD0iaHR0cDovL25zLmFkb2JlLmNvbS9waG90b3Nob3AvMS4wLyIgeG1sbnM6SXB0YzR4bXBDb3JlPSJodHRwOi8vaXB0Yy5vcmcvc3RkL0lwdGM0eG1wQ29yZS8xLjAveG1sbnMvIiAgIHhtbG5zOkdldHR5SW1hZ2VzR0lGVD0iaHR0cDovL3htcC5nZXR0eWltYWdlcy5jb20vZ2lmdC8xLjAvIiB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iIHhtbG5zOnBsdXM9Imh0dHA6Ly9ucy51c2VwbHVzLm9yZy9sZGYveG1wLzEuMC8iICB4bWxuczppcHRjRXh0PSJodHRwOi8vaXB0Yy5vcmcvc3RkL0lwdGM0eG1wRXh0LzIwMDgtMDItMjkvIiB4bWxuczp4bXBSaWdodHM9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9yaWdodHMvIiBwaG90b3Nob3A6Q3JlZGl0PSJHZXR0eSBJbWFnZXMvaVN0b2NrcGhvdG8iIEdldHR5SW1hZ2VzR0lGVDpBc3NldElEPSI5MDkwNDU5NzYiIHhtcFJpZ2h0czpXZWJTdGF0ZW1lbnQ9Imh0dHBzOi8vd3d3LmdldHR5aW1hZ2VzLmNvbS9ldWxhP3V0bV9tZWRpdW09b3JnYW5pYyZhbXA7dXRtX3NvdXJjZT1nb29nbGUmYW1wO3V0bV9jYW1wYWlnbj1pcHRjdXJsIiA+CjxkYzpjcmVhdG9yPjxyZGY6U2VxPjxyZGY6bGk+TmlzZXJpTjwvcmRmOmxpPjwvcmRmOlNlcT48L2RjOmNyZWF0b3I+PGRjOmRlc2NyaXB0aW9uPjxyZGY6QWx0PjxyZGY6bGkgeG1sOmxhbmc9IngtZGVmYXVsdCI+WW91bmcgY3V0ZSBjYXQgcmVzdGluZyBvbiB3b29kZW4gZmxvb3IuIFRoZSBCcml0aXNoIFNob3J0aGFpciBwZWRpZ3JlZWQga2l0dGVuIHdpdGggYmx1ZSBncmF5IGZ1cjwvcmRmOmxpPjwvcmRmOkFsdD48L2RjOmRlc2NyaXB0aW9uPgo8cGx1czpMaWNlbnNvcj48cmRmOlNlcT48cmRmOmxpIHJkZjpwYXJzZVR5cGU9J1Jlc291cmNlJz48cGx1czpMaWNlbnNvclVSTD5odHRwczovL3d3dy5nZXR0eWltYWdlcy5jb20vZGV0YWlsLzkwOTA0NTk3Nj91dG1fbWVkaXVtPW9yZ2FuaWMmYW1wO3V0bV9zb3VyY2U9Z29vZ2xlJmFtcDt1dG1fY2FtcGFpZ249aXB0Y3VybDwvcGx1czpMaWNlbnNvclVSTD48L3JkZjpsaT48L3JkZjpTZXE+PC9wbHVzOkxpY2Vuc29yPgoJCTwvcmRmOkRlc2NyaXB0aW9uPgoJPC9yZGY6UkRGPgo8L3g6eG1wbWV0YT4KPD94cGFja2V0IGVuZD0idyI/Pgr/2wCEAAkGBwgHBgkIBwgKCgkLDRYPDQwMDRsUFRAWIB0iIiAdHx8kKDQsJCYxJx8fLT0tMTU3Ojo6Iys/RD84QzQ5OjcBCgoKDQwNGg8PGjcl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" alt="British Shorthair">
    <h2>British Shorthair</h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div>
<div class="col col3">
    <img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/4QBTRXhpZgAASUkqAAgAAAABAA4BAgAxAAAAGgAAAAAAAABNYWluZSBDb29uIGNhdCBvbiB3aGl0ZSBiYWNrZ3JvdW5kLCBjbG9zZS11cCB2aWV3/+0AfFBob3Rvc2hvcCAzLjAAOEJJTQQEAAAAAABgHAJQAAhuaWtreXRvaxwCeAAxTWFpbmUgQ29vbiBjYXQgb24gd2hpdGUgYmFja2dyb3VuZCwgY2xvc2UtdXAgdmlldxwCbgAYR2V0dHkgSW1hZ2VzL2lTdG9ja3Bob3Rv/+EFNGh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8APD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4KPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyI+Cgk8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPgoJCTxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiIHhtbG5zOnBob3Rvc2hvcD0iaHR0cDovL25zLmFkb2JlLmNvbS9waG90b3Nob3AvMS4wLyIgeG1sbnM6SXB0YzR4bXBDb3JlPSJodHRwOi8vaXB0Yy5vcmcvc3RkL0lwdGM0eG1wQ29yZS8xLjAveG1sbnMvIiAgIHhtbG5zOkdldHR5SW1hZ2VzR0lGVD0iaHR0cDovL3htcC5nZXR0eWltYWdlcy5jb20vZ2lmdC8xLjAvIiB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iIHhtbG5zOnBsdXM9Imh0dHA6Ly9ucy51c2VwbHVzLm9yZy9sZGYveG1wLzEuMC8iICB4bWxuczppcHRjRXh0PSJodHRwOi8vaXB0Yy5vcmcvc3RkL0lwdGM0eG1wRXh0LzIwMDgtMDItMjkvIiB4bWxuczp4bXBSaWdodHM9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9yaWdodHMvIiBwaG90b3Nob3A6Q3JlZGl0PSJHZXR0eSBJbWFnZXMvaVN0b2NrcGhvdG8iIEdldHR5SW1hZ2VzR0lG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" alt="Maine Coon">
    <h2>Maine Coon</h2>
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Accusantium quo adipisci voluptatum in iure. Ad consequatur fugit adipisci hic, molestiae eaque distinctio cumque iusto id ducimus, magni eveniet nemo eos.</p>
</div>
<div class="col col4">
    <img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/4QBfRXhpZgAASUkqAAgAAAADAJiCAgAVAAAAMgAAABoBBQABAAAARwAAABsBBQABAAAATwAAAAAAAAAmIzE2OSBEbWl0cml5IEthbGluaW4sAQAAAQAAACwBAAABAAAA/+0AXlBob3Rvc2hvcCAzLjAAOEJJTQQEAAAAAABCHAJQAAZTaW50ZXocAnQAFSYjMTY5IERtaXRyaXkgS2FsaW5pbhwCbgAYR2V0dHkgSW1hZ2VzL2lTdG9ja3Bob3Rv/+EEyGh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8APD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4KPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyI+Cgk8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPgoJCTxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiIHhtbG5zOnBob3Rvc2hvcD0iaHR0cDovL25zLmFkb2JlLmNvbS9waG90b3Nob3AvMS4wLyIgeG1sbnM6SXB0YzR4bXBDb3JlPSJodHRwOi8vaXB0Yy5vcmcvc3RkL0lwdGM0eG1wQ29yZS8xLjAveG1sbnMvIiAgIHhtbG5zOkdldHR5SW1hZ2VzR0lGVD0iaHR0cDovL3htcC5nZXR0eWltYWdlcy5jb20vZ2lmdC8xLjAvIiB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iIHhtbG5zOnBsdXM9Imh0dHA6Ly9ucy51c2VwbHVzLm9yZy9sZGYveG1wLzEuMC8iICB4bWxuczppcHRjRXh0PSJodHRwOi8vaXB0Yy5vcmcvc3RkL0lwdGM0eG1wRXh0LzIwMDgtMDItMjkvIiB4bWxuczp4bXBSaWdodHM9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9yaWdodHMvIiBkYzpSaWdodHM9IiZhbXA7IzE2OSBEbWl0cml5IEthbGluaW4iIHBob3Rvc2hvcDpDcmVkaXQ9IkdldHR5IEltYWdlcy9pU3RvY2tw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" alt="Persian Cat">
    <h2>Persian cat</h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. </p>
</div>
<div class="col col5">
    <img src="data:image/jpeg;base64,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" alt="Abyssinian">
    <h2>Abyssinian</h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.ccusantium quo adipisci voluptatum in iure. Ad consequatur fugit adipisci hic</p>
</div>
<div class="col col6">
    <img src="data:image/jpeg;base64,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" alt="American Shorthair">
    <h2>American Shorthair</h2>
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Accusantium quo adipisci voluptatum in iure. Ad consequatur fugit adipisci hic, molestiae eaque distinctio cumque iusto id ducimus, magni eveniet nemo eos.</p>
</div>
</div>
                    
CSS
.col {
    box-sizing: border-box;
    border: 1px solid gray;
    padding:5px;
    width: calc(100%/3);
    float:left;
    max-height: 200px;
    overflow-y: scroll;
}
                     

Cat Breeds

Siamese Cat

Siamese cat

Lorem ipsum dolor sit amet consectetur adipisicing elit.

British Shorthair

British Shorthair

Lorem ipsum dolor sit amet consectetur adipisicing elit.

Maine Coon

Maine Coon

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Accusantium quo adipisci voluptatum in iure. Ad consequatur fugit adipisci hic, molestiae eaque distinctio cumque iusto id ducimus, magni eveniet nemo eos.

Persian Cat

Persian cat

Lorem ipsum dolor sit amet consectetur adipisicing elit.

Abyssinian

Abyssinian

Lorem ipsum dolor sit amet consectetur adipisicing elit.ccusantium quo adipisci voluptatum in iure. Ad consequatur fugit adipisci hic

American Shorthair

American Shorthair

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Accusantium quo adipisci voluptatum in iure. Ad consequatur fugit adipisci hic, molestiae eaque distinctio cumque iusto id ducimus, magni eveniet nemo eos.