CSS/C3/Float-and-Overflow-in-CSS/English
Title of the script: Float and Overflow in CSS
Author: Neha Solanki
Domain Reviewer: Ankita Maske, Om Prakash Soni
Novice Reviewer: Madhuri Ganapathi
Keywords: CSS, HTML, Web Page, Web Design, Web Technology, Video Tutorial, Spoken Tutorial, CSS Property, CSS Float, CSS Clear, CSS Overflow
Visual Cue | Narration |
Slide: Title | Welcome to the spoken tutorial on “Float and Overflow in CSS” |
Slide: Learning Objectives | In this tutorial, we will learn about
|
Slide:
System Requirements |
This tutorial is recorded using,
However you may use any other editor or browser of your choice. |
Slide: Prerequisite | To practise this tutorial, you should know to use HTML and CSS
If not, please go through the HTML and CSS tutorials on this website. |
Slide: Code Files | The files used in this tutorial are available in the Code Files link on this tutorial page.
Please download and extract them. Make a copy and then use them while practising. |
Slide: Float Property | Float Property
|
Slide: Float Property Value | The values of this property are:
|
Slide: Float Property Value |
Let us understand these through examples. |
Open my-css folder | Go to the practice folder my-css. |
Point to Mypage.html in my-css folder | For this demonstration, I’m using the file Mypage.html.
The same is available in the Code files link for practice. |
Open Mypage.html in gedit | Open the file Mypage.html in the text editor. |
Narration: | To observe the float property, let's add an image. |
[gedit - Mypage.html]
Type: <img src= "veg.png"> |
Add the img tag in the div block.
Between the div tag and p tag, type the code as shown. |
[gedit - Mypage.html]
Highlight: veg.png |
veg.png image is available in the Code Files link on this tutorial page.
Please download and keep it in the folder where you have saved your code files. |
Press Ctrl + S | Save the file. |
Switch to my-css folder | Switch to the “my-css” folder. |
Open mystyle.css | Now open the file mystyle.css, in any text editor.
I have opened it in the gedit Text Editor. |
[gedit - mystyle.css]
Type- img { width: 100px; height: 90px;} |
Let us set image properties width to 100 pixels and height to 90 pixels.
Next to the div tag, type the code as shown. |
Press Ctrl + S | Save the file. |
Open Mypage.html in firefox | Switch to the my-css folder.
Now open the file Mypage.html in a web browser. |
[Firefox]
Highlight the output |
Observe the output.
The image is added in the div block. The text has floated outside the block due to its restricted size. To arrange the image and text inside the block, we will use float property. |
Switch to mystyle.css | Switch to the mystyle.css file. |
[gedit - mystyle.css]
Type: float: left; |
Now I will set the float property value to left, for the image.
In the img tag, next to the height property, type the code as shown. |
Press Ctrl + S | Save the file. |
Switch to firefox | Switch to the browser and refresh the page. |
[Firefox]
Highlight the output |
Observe the output.
Now the image is set to the left side and the text is wrapped around it. |
[gedit] highlight:
float: right; [Firefox] Highlight the output |
If I set the float value to right, then the image will move to the right side. |
Switch to mystyle.css | Come back to the mystyle.css file. |
[gedit - mystyle.css]
Update: float: inherit; |
Now I will set the float property value to inherit for this image.
Update the code as shown. |
Press Ctrl + S | Save the file. |
Switch to firefox | Switch to the browser and refresh the page. |
[Firefox]
Highlight the output |
Observe the output.
Now the image and text are set to the previous style. This is because the image inherits the property of the div block. Observe that the div block does not have float property. |
Switch to mystyle.css | Switch back to the mystyle.css file. |
[gedit - mystyle.css]
Type: float: right; |
Now I will set the float property value for the div block.
Inside the div tag, next to the padding property, type the code as shown. |
Press Ctrl + S | Save the file. |
Switch to firefox | Switch to the browser and refresh the page. |
[Firefox]
Highlight the output |
Observe the output.
Now the block has shifted to the right side. The image inside it also shifted to the right because it inherits the div block property. |
Switch to mystyle.css | Switch back to the mystyle.css file. |
[gedit - mystyle.css]
Update: float: left; |
Now I will set the float property value to left for the image.
Inside the img tag, update the code as shown. |
Press Ctrl + S | Save the file. |
Switch to firefox | Switch to the browser and refresh the page. |
[Firefox]
Highlight the output |
Observe the output.
Though the block was set to the right, the image has shifted to the left. This is because the float value of the image is set to left instead of inherit. Earlier float property of the image was inheriting the float value of the div block. |
Switch to mystyle.css | Switch to the mystyle.css file. |
[gedit - mystyle.css]
Delete: float: right; Ctrl + S |
Delete the float property of the div tag and save the file. |
Switch to firefox | Switch to the browser and refresh the page. |
[Firefox]
Highlight the output |
Observe the output.
Both the block and image are set to the left now. |
Slide: Clear Property | Clear Property
|
Slide: Clear Property Value | Values of this property are:
|
Slide: Clear Property Value |
|
Slide: Clear Property Value |
Let us try these. |
Switch to mystyle.css | Switch to the mystyle.css file. |
[gedit - mystyle.css]
Type: clear: none; |
I will set the clear property value to none for the paragraph.
In the p tag, next to the font property, type the code as shown. |
Press Ctrl + S | Save the file. |
Switch to firefox | Switch to the browser and refresh the page. |
[Firefox]
Highlight the paragraph |
Observe the output.
There is no change in the output because none is the default value of clear property. The text floats around the image. |
Switch to mystyle.css | Switch back to the mystyle.css file. |
[gedit - mystyle.css]
Update: clear: both; |
Now I will change the clear property value to both for the paragraph.
Update the code as shown. |
Press Ctrl + S | Save the file. |
Switch to firefox | Switch to the browser and refresh the page. |
[Firefox]
Highlight the paragraph |
Observe the output.
Now the paragraph moved down because it does not allow the image to float on both sides. |
[Firefox]
Highlight the paragraph |
The image and paragraph are too big to fit within the block.
That is why the paragraph flows out of the block. To solve this problem, we use overflow property. Let us understand about this. |
Slide: Overflow Property | Overflow property decides what to do when the content overflows the block. |
Slide: Overflow Property Value | Values of this property are:
|
Slide: Overflow Property Value |
|
Slide: Overflow Property Value |
Let us try these. |
Switch to mystyle.css | Switch to the mystyle.css file. |
[gedit - mystyle.css]
Type: overflow: auto; |
Now I will set the overflow property to auto for the div block.
In the div tag, next to the padding property, type the code as shown. |
[gedit - mystyle.css]
Highlight: overflow: auto; |
Here overflow property is set to auto.
This means the text will not overflow outside the border. |
Press Ctrl + S | Save the file. |
Switch to firefox | Switch to the browser |
[Firefox]
Highlight the paragraph |
The text has overflowed outside the border. |
[Firefox] Ctrl + R
Highlight the paragraph |
Refresh the page once again and observe the output.
This time, the overflowed content is clipped. And a scrollbar is added to the block to see the overflowed content. You may explore visible, scroll and hidden overflow property values on your own. |
Only narration | With this we have come to the end of this tutorial.
Let us summarize. |
Slide: Summary | In this tutorial, we have learnt about:
|
Slide: Assignment | As an assignment
|
Slide: Assignment |
|
Slide: Assignment |
|
Slide:
About Spoken Tutorial project |
The video at the following link summarises the Spoken Tutorial project.
Please download and watch it. |
Slide: Spoken Tutorial Workshops | The Spoken Tutorial Project team conducts workshops and gives certificates.
For more details, please write to us. |
Slide: Answers for THIS Spoken Tutorial | Please post your timed queries on this forum. |
Slide: Acknowledgement | Spoken Tutorial project is funded by Ministry of Education (MoE), Govt. of India. |
Slide: Thanks | This is Neha Solanki from IIT Bombay.
Thank you for watching. |