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

From Script | Spoken-Tutorial
Revision as of 17:49, 11 November 2020 by Nehasolanki (Talk | contribs)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to: navigation, search

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
  • 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 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:
  • 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.

Contributors and Content Editors

Nehasolanki, Pravin1389

Retrieved from "https://script.spoken-tutorial.org/index.php?title=CSS/C3/Float-and-Overflow-in-CSS/English&oldid=54387"