You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

39 lines
2.2 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="index.css">
<title>CSS Common Positioning Properties</title>
</head>
<body>
<!-- Float property -->
<p>
The Float property is used for positioning and formatting content. e g.
Let an image float left to the text in a container.
</p>
<p>
<img src="https://place-puppy.com/450x450" class="img-float" alt="">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla earum autem exercitationem natus minima repellendus corporis officia aliquid! Quaerat dolores aspernatur maiores? Molestias, adipisci soluta! Incidunt exercitationem quidem dolorem culpa?
Quas, repudiandae? Explicabo deleniti dicta, eveniet ducimus sunt voluptatem ut obcaecati. Repellendus, ipsum cupiditate ea alias magni quia enim nihil quam cum voluptatem sapiente tempora, nam, dolores soluta aspernatur. Sequi.
Distinctio incidunt nemo ipsa in. Quae repellat ut hic sit maiores. Repellat ad tempore beatae soluta ullam in provident odit esse magnam, quibusdam quasi temporibus repudiandae sunt a aliquam modi!
Excepturi quos enim iure quidem consequuntur, at delectus unde in, inventore est perspiciatis numquam dignissimos deserunt aperiam fugiat ducimus perferendis nostrum recusandae architecto et commodi sed? Ratione cum enim provident.
Laboriosam alias assumenda qui, atque aspernatur ut omnis debitis itaque tempora! Ullam consequatur perferendis ab provident deleniti officia, aliquid reiciendis nobis dolorum repudiandae vitae, debitis blanditiis asperiores! Possimus, voluptatem nam.
</p>
<!-- CSS Positioning -->
<h2>CSS Positioning</h2>
<div class="parent-element">Parent Element
<div class="child-one">
I'm the child element.
</div>
<div class="child-two">
All eyes on me. I am the child two element.
</div>
<div class="child-three">
I'm the child three element.
</div>
</div>
</body>
</html>