Okay! So we know how our individual elements are constructed. But how do we determine where they go on the page?
One way is to use floats. When you float an element on the page, you're telling the webpage: "I'm about to tell you where to put this element, but you have to put it into the flow of other elements." This means that if you have several elements all floating, they all know the others are there and don't land on top of each other.
You can think of the HTML page as sort of like a sea, and floating elements as boats on it: all the boats have positions on the sea, and they all see and steer clear of each other.
(Some of the positioning methods we'll learn in upcoming sections canaccidentally drop elements on top of each other.)
Instructions
Let's get started. Set your div's
floatproperty to right!
div {
height: 300px;
width: 100px;
border: 2px solid black;
border-radius: 5px;
background-color: #308014;
float:right;
}
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<title>Result</title>
</head>
<body>
<div></div>
</body>
</html>
No comments:
Post a Comment