Hi there, welcome back.
This is the final part of class 109. In the previous tutorial we discussed the display property of html elements. In this tutorial we shall discuss the float property.
Float is used to place an element on the left or right side of its container, allowing text and inline elements to wrap around it. ( referenced from 1)
To understand this better, lets write some code. Create a new html file using your text editor and name it 'floating.html'. Write the following code in it, then save and view it in a browser.
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="floating.css">
</head>
<body>
<h1>this is a heading</h1>
<p id="p1">this is paragraph 1</p>
<p id="p2">this is another paragraph, called paragraph 2</p>
</body>
</html>
All the 3 elements, the h1 heading and the 2 paragraphs, are block elements. This means they will take the entire width available and will each start on it's own line even if there is space to fit another element to it's side.
Now create a new file and save it as 'floating.css' in the same location (folder) as the above html file.
Using your text editor, open the file and type in the following css code;
h1,p{
border : 1px solid;
}
h1{
float: left;
}
Here we first show the elements borders using the border property, this is so than we can easily see the width and height (space) each element covers.
Then specify the float property of h1 element to be left.
Now refresh the floating.html page in your browser.
Notice how the heading is now 'floating' on the left side, with the paragraphs next to it.
However, looking at the border lines, you can see that the paragraphs are still taking up the entire width. You can fix this by modifying the css as follows;
h1,p{
border : 1px solid;
}
h1{
float: left;
}
p{
display: inline-block;
}
Try changing the float property to right and observe what happens.
Now suppose you want to the second paragraph to come below the other elements (as it was initially before floating the heading), you then have to clear the left floating by modifying the css as follows;
h1,p{
}
h1{
float: left;
}
#p1{
display: inline-block;
}
#p2{
clear: left;
}
First, we change the display of the first paragraph to inline-block, leaving the other paragraph as is (block display). Then we clear the left float behavior from the second paragraph.
Save and refresh your browser to view the changes.
Aside from the arrangement of divisions we saw in part II, here is another cool application of this float property.
Delete all the code in floating.html and write the following instead.
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="floating.css">
</head>
<body>
<p>
<span id="leftFloat">T</span>
<span id="inlineSection">his is a paragraph with a hanging first letter. Cool huh?!</span>
<span id="clearedFloat">Play around with css and learn more fun ways of arranging stuff.</span>
</p>
</body>
</html>
Then edit the floating.css code by deleting all the code in it and typing the following instead;
#leftFloat{
float: left;
font-size: 48px;
}
#inlineSection{
display: inline-block;
margin-top: 20px;
}
#clearedFloat{
display: block;
clear: left;
}
Save both files and refresh your floating.html page in the browser.
Great.
That is all for today (I'll upload a video that you can use to follow up on this soon). Reach out through the comment section below if you have any questions or suggestions. In the coming tutorial, we shall have a quick review before moving on to libraries and Bootstrap.
Happy coding.
This is the final part of class 109. In the previous tutorial we discussed the display property of html elements. In this tutorial we shall discuss the float property.
Float is used to place an element on the left or right side of its container, allowing text and inline elements to wrap around it. ( referenced from 1)
To understand this better, lets write some code. Create a new html file using your text editor and name it 'floating.html'. Write the following code in it, then save and view it in a browser.
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="floating.css">
</head>
<body>
<h1>this is a heading</h1>
<p id="p1">this is paragraph 1</p>
<p id="p2">this is another paragraph, called paragraph 2</p>
</body>
</html>
All the 3 elements, the h1 heading and the 2 paragraphs, are block elements. This means they will take the entire width available and will each start on it's own line even if there is space to fit another element to it's side.
Now create a new file and save it as 'floating.css' in the same location (folder) as the above html file.
Using your text editor, open the file and type in the following css code;
h1,p{
border : 1px solid;
}
h1{
float: left;
}
Here we first show the elements borders using the border property, this is so than we can easily see the width and height (space) each element covers.
Then specify the float property of h1 element to be left.
Now refresh the floating.html page in your browser.
Notice how the heading is now 'floating' on the left side, with the paragraphs next to it.
However, looking at the border lines, you can see that the paragraphs are still taking up the entire width. You can fix this by modifying the css as follows;
h1,p{
border : 1px solid;
}
h1{
float: left;
}
p{
display: inline-block;
}
Try changing the float property to right and observe what happens.
Now suppose you want to the second paragraph to come below the other elements (as it was initially before floating the heading), you then have to clear the left floating by modifying the css as follows;
h1,p{
}
h1{
float: left;
}
#p1{
display: inline-block;
}
#p2{
clear: left;
}
First, we change the display of the first paragraph to inline-block, leaving the other paragraph as is (block display). Then we clear the left float behavior from the second paragraph.
Save and refresh your browser to view the changes.
Aside from the arrangement of divisions we saw in part II, here is another cool application of this float property.
Delete all the code in floating.html and write the following instead.
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="floating.css">
</head>
<body>
<p>
<span id="leftFloat">T</span>
<span id="inlineSection">his is a paragraph with a hanging first letter. Cool huh?!</span>
<span id="clearedFloat">Play around with css and learn more fun ways of arranging stuff.</span>
</p>
</body>
</html>
Then edit the floating.css code by deleting all the code in it and typing the following instead;
#leftFloat{
float: left;
font-size: 48px;
}
#inlineSection{
display: inline-block;
margin-top: 20px;
}
#clearedFloat{
display: block;
clear: left;
}
Save both files and refresh your floating.html page in the browser.
Great.
That is all for today (I'll upload a video that you can use to follow up on this soon). Reach out through the comment section below if you have any questions or suggestions. In the coming tutorial, we shall have a quick review before moving on to libraries and Bootstrap.
Happy coding.
Comments
Post a Comment