Tag Archives: HTML

CSS Overflow

  • The ‘overflow’ property specifies whether to clip/cut the content or to add scrollbars when the content of an element (like div) is too big and does not fit inside the element area.
  • Let’s say we have the following html code:

<html>

<head>

<style>

</style>

</head>

<body>

<h2>CSS overflow</h2>

<div>You can use the overflow property when you want to have

better control of the layout. The overflow property specifies what

happens if content overflows an element’s box.</div>

</body>

</html>

  • Let’s apply the overflow property with the below values one by one and see the output:
  1. visible: It means show the content even if it goes outside the element area. This is default. Below is the style to apply:

<style>

div {

   background-color: tomato;

   width: 200px;

   height: 50px;

   border: 1px dotted black;

   overflow: visible;

}

</style>

2. hidden:  The outside content will be hidden or invisible. Below is the style to apply:

<style>

div {

   background-color: tomato;

   width: 200px;

   height: 50px;

   border: 1px dotted black;

   overflow: hidden;

}

</style>

3. scroll: Scrossbars (both horizontal and vertical) will be added so that the user can scroll the element to view the invisible content which is clipped inside the element. Both the scrollbars will always be added.  Below is the style to apply:

<style>

div {

   background-color: tomato;

   width: 200px;

   height: 50px;

   border: 1px dotted black;

   overflow: scroll;

}

</style>

4. auto: same as ‘scroll’ value but it adds scroll only when it is necessary. Below is the style to apply:

<style>

div {

   background-color: tomato;

   width: 200px;

   height: 50px;

   border: 1px dotted black;

   overflow: auto;

}

</style>

  • The overflow-x property specifies what to do with left and right edges of the content.
  • The overflow-y property specifies what to do with the top and bottom edges of the content.
  • Below is the style to apply for overflow-x & overflow-y:

<style>

div {

   background-color: tomato;

   width: 200px;

   height: 50px;

   border: 1px dotted black;

   overflow-x: hidden; /* hide the horizontal scroll*/

   overflow-y: scroll; /*add the vertical scroll*/

}

</style>

One hidden thing to know about the ‘li’ element!

  • Many of us think that ‘li’ displays a list of items and that is why each item is displayed in a new line. But this is not so.
  • The ‘li’ is a block level element and block level element occupies the full width of a web page. So the next item has no space to list on the same line and that’s why each list item is displayed on the new line.
  • One demo of li element occupying full web page width:

display:none Vs visibility:hidden

  • Both the CSS properties hide an element. But there is a difference between these two properties.
  • ‘display:none’ property once applied on any element doesn’t occupy the space.
  • Whereas ‘visibility:hidden’ property once applied on any element still occupies the space.
  • Following examples illustrates the difference:

<html>

<head>

<style>

#div1{

border:1px solid black;

}

#div2{

border:1px solid black;

}

</style>

</head>

<body>

<h2>display:none demo starts from here</h2>

<div id=”div1″>This is display:none demo.</div>

<h2>display:none demo ends here</h2>

<h2>visibility:hidden demo starts from here</h2>

<div id=”div2″>This is visibility:hidden demo.</div>

<h2>visibility:hidden demo ends here</h2>

</body>

</html>

  • The output of above code will be as shown below:
  • Now let’s apply the ‘display:none’ to div1 & ‘visibility:hidden’ to div2 and see the difference:

<style>

#div1{

border:1px solid black;

display:none;

}

#div2{

border:1px solid black;

visibility:hidden;

}

  • As shown in the above output, after applying the ‘display:none’ property to div1 it hides and the space is not occupied whereas after applying ‘visibility:hidden’ property to div2, the space is still occupied.