Pravin1389 at 11:31, 13 November 2020

2020-11-13T11:31:52Z

Nehasolanki: Created page with "'''Title of the script: '''Float and Overflow in CSS '''Author:''' Neha Solanki '''Domain Reviewer: '''Ankita Maske, Om Prakash Soni '''Novice Reviewer: '''Madhuri Ganapath..."

2020-11-11T12:19:01Z

Created page with "'''Title of the script: '''Float and Overflow in CSS '''Author:''' Neha Solanki '''Domain Reviewer: '''Ankita Maske, Om Prakash Soni '''Novice Reviewer: '''Madhuri Ganapath..."

New page

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

{| border="1"
|-
| | '''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

* '''Float''', '''Clear '''and '''Overflow '''properties of an '''element '''in''' CSS'''
* Use these properties to achieve the desired output.

|-
| | Slide:

System Requirements

| | This tutorial is recorded using,

* '''Ubuntu Linux OS v 18.04 '''
* '''CSS3'''
* '''HTML5'''
* '''gedit Text Editor''' and
* '''Firefox web browser'''

However you may use any other '''editor''' or '''browser''' of your choice.
|-
| | Slide: Prerequisite

https://spoken-tutorial.org
| | 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'''
* It''' '''is used to set the horizontal positioning of an '''element '''inside the parent '''block'''.
* It allows the '''text '''to wrap around an '''element.'''

|-
| | Slide: Float Property Value
| | The values of this property are:

* '''left''': this positions the '''element''' to the '''left '''side of the parent '''block'''
* '''right''': this positions the '''element''' to the '''right '''side of the parent '''block'''

|-
| | Slide: Float Property Value
| |
* '''none '''(default): does not position the '''element'''
* '''initial: '''sets the '''float''' property to its default value
* '''inherit''' : inherits the position of its parent '''element'''

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

The '''text''' will wrap around it.
|-
| | 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'''
* It is related to''' float.'''
* It prevents an''' element '''from being displayed next to''' floated elements.'''

|-
| | Slide: Clear Property Value
| | Values of this property are:

* '''left''': '''elements''' are not allowed to '''float''' on the left''' '''side of the specified''' element'''
* '''right''': '''elements''' are not allowed to '''float''' on the right''' '''side of the specified''' element'''

|-
| | Slide: Clear Property Value

| |
* '''both''': '''elements''' are not allowed to '''float''' on both sides of the specified''' element'''
* '''none''' (default):'''elements''' are allowed to '''float''' on both sides of the specified''' element'''

|-
| | Slide: Clear Property Value

| |
* '''initial: '''sets the''' clear '''property to its default value
* '''inherit: element '''inherits the '''clear''' value of its parent.

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''' float'''s 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:

* '''visible '''(default):
** Overflowed content is not clipped.
** It is visible outside the''' block'''.
* '''scroll''':
** Overflowed content is clipped.
** A '''scrollbar''' is added to see the whole content.

|-
| | Slide: Overflow Property Value
| |
* '''auto''':
** Automatically adds a '''scrollbar''' whenever required.
* '''hidden''':
** Overflowed content is clipped and is invisible.

|-
| | Slide: Overflow Property Value
| |
* '''initial''':
** Sets the property value to its default value.
* '''inherit''':
** Inherits the property value from its parent '''element'''

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
| | Observe the output.

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:

* '''Float, Clear''' and''' Overflow '''properties of an '''element '''in''' CSS'''
* Use these properties to achieve the desired output

|-
| | Slide: Assignment
| | As an assignment

* Open the file '''webpage.html''' which you have created earlier.
* Add the''' '''image''' veg.png '''in''' '''the''' div block.'''

|-
| | Slide: Assignment
| |
* Open the file '''styles.css '''which you have created earlier.
* Update the following for '''div''' '''block'''
** '''width''' to '''600px.'''
** '''height''' to '''200px.'''
** '''overflow value '''to''' scroll'''.
* Set the '''float value''' to '''right '''for the '''image'''.

|-
| | Slide: Assignment
| |
* Link the '''styles.css''' file to '''webpage.html''' file
* Observe the output.

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

@@ Line 184: / Line 184: @@
 Highlight the output
 |  | If I set the '''float''' value to '''right''', then the image will move to the right side'''.'''
 |-
 |  | Switch to mystyle.css
@@ Line 446: / Line 444: @@
 Highlight the paragraph
-|  | Observe the output.
+|  | The text''' '''has overflowed outside the border.
-−
 The text''' '''has overflowed outside the border.
 |-
 |  | [Firefox] Ctrl + R

CSS/C3/Float-and-Overflow-in-CSS/English - Revision history

Pravin1389 at 11:31, 13 November 2020

Nehasolanki: Created page with "'''Title of the script: '''Float and Overflow in CSS '''Author:''' Neha Solanki '''Domain Reviewer: '''Ankita Maske, Om Prakash Soni '''Novice Reviewer: '''Madhuri Ganapath..."