Prev

Layout Properties

Display

Display/Visibility
The display property specifies if/how an element is displayed. Every HTML element has a default display value depending on what type of element it is. The default display value for most elements is block or inline.

Hiding An Element
Display: none is used to hide elements without deleting or recreating them. It is commonly used with JavaScript to hide and show a particular element.

Visibility:hidden
Visibility property can be set to hidden to hide an element; but it will
take up the same space as before. The element will be hidden, but still
affect the layout.

Display : Block and Inline
A block element is an element that takes up the full width available, and
has a line break before and after it.
An inline element only takes up as much width as necessary, and does not
force line breaks.

Override The Default Display Value
Changing an inline element to a block element, or vice versa, can be useful for making the page look a specific way, and still follow web standards. The following example displays elements as inline elements and elements as block elements:

Sample code 

p {display:inline;} 
span {display:block;}

Predefined values for Display property
Inline
block
none

<html>
<head>
<style>
      p{display:inline} 
</style>
</head>
<body>
   <p>Hey this is a sample para to test the display property values</p>
  <p>This is Para two buddy!...have a look at my position it all depends on the display value</p>
</body>
</html>

Floating Elements

What is CSS Float?

With CSS float, an element can be pushed to the left or right, allowing
other elements to wrap around it.
Float is often used with images, but it is also useful when working with
layouts.

How elements Float?

Elements are floated horizontally, this means that an element can only be
floated left or right, not up or down.

A floated element will move as far to the left or right as it can. Usually this
means all the way to the left or right of the containing element. The
elements after the floating element will flow around it.

The elements before the floating element will not be affected. If an image
is floated to the right, a following text flows around it, to the left.

Sample Code

Img {float:right;}

FLOATING ELEMENTS NEXT TO EACH OTHER

Float

If you place several floating elements after each other, they will float next
to each other if there is room.
Here I have made an image gallery using the float property:
Sample code:

.gallery{float:left;width:110px;height:90px;margin:5px;} 
<html>
<head>
<style>
    .gallery{float:left;width:110px;height:90px;margin:5px;} 
</style>
</head>
<body>
    <img class="gallery" src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/31/Autumn_scenery.jpg/800px-Autumn_scenery.jpg"/>
  <img class="gallery" src="https://upload.wikimedia.org/wikipedia/commons/8/8d/Natural_scenery_of_nepal_07.jpg" />
  
   <img class="gallery" src="https://www.dhresource.com/0x0/f2/albu/g10/M01/AD/73/rBVaVl5KvA6AG3VRAAFg-7qJ3cc192.jpg/beautiful-scenery-wallpapers-small-fresh.jpg" />
</body>
</html>

TURNING OFF FLOAT USING CLEAR

Clear

Elements after the floating element will flow around it. To avoid this, use
the clear property.
The clear property specifies which sides of an element other floating
elements are not allowed.

Example:

.text_line{clear:both;}

All CSS float properties
Clear – specifies which side of an element where other floating elements are not allowed.
Values – left, right, both, inherit, none

Float – specifies whether or not a box should float
Values – left, right, none

<html>
<head>
<style>
   .gallery
  {
      float:left; /*left, right, both, inherit, none*/
      width:110px;
      height:90px;
      margin:5px;
  } 
</style>
</head>
<body>
    <img class="gallery" src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/31/Autumn_scenery.jpg/800px-Autumn_scenery.jpg"/>
   <p>Q: What do you call a Sardar man with only one hair?<br>
A: IK-BAL SINGH.</p>
<p>Teacher: Willy, name one important thing we have today that we didn't have ten years ago.<br>
Willy: Me!</p>
</body>
</html>

In the above example, the content of <P> appear to the right side of the image because the image is floating to the left (float:left;}

<html>
<head>
<style>
   .gallery
  {
      float:left; /*left, right,none*/
      width:110px;
      height:90px;
      margin:5px;
  } 
  .text_line{clear:both; /*left, right, both, inherit, none*/}
</style>
</head>
<body>
    <img class="gallery" src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/31/Autumn_scenery.jpg/800px-Autumn_scenery.jpg"/>
   <p>Q: What do you call a Sardar man with only one hair?<br>
A: IK-BAL SINGH.</p>
<p class="text_line">Teacher: Willy, name one important thing we have today that we didn't have ten years ago.<br>
Willy: Me!</p>
</body>
</html>

In the above example, the content of second <P> appear below the image because the clear:both is applied to the second para.

Leave a Comment