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
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> |