CODEWITHSUNDEEP
htmlcss
Tom Gullen
Tom Gullen

Reputation: 61729

What does "both" mean in <div style="clear:both">

<div style="float:left">Hello</div>
<div style="float:right">Howdy dere pardner</div>
<div style="clear:both"></div>

I get what it does, but why the name both? What does both mean?

Upvotes: 31

Views: 200045

Answers (3)

Sagar Pise
Sagar Pise

Reputation: 887

Description of the possible values:

  • left: No floating elements allowed on the left side
  • right: No floating elements allowed on the right side
  • both: No floating elements allowed on either the left or the right side
  • none: Default. Allows floating elements on both sides
  • inherit: Specifies that the value of the clear property should be inherited from the parent element

Source: w3schools.com

Upvotes: 18

al123
al123

Reputation: 569

Clear:both gives you that space between them.

For example your code:

  <div style="float:left">Hello</div>
  <div style="float:right">Howdy dere pardner</div>

Will currently display as :

Hello  ...................   Howdy dere pardner

If you add the following to above snippet, 

  <div style="clear:both"></div>

In between them it will display as:

Hello ................ 
                       Howdy dere pardner

giving you that space between hello and Howdy dere pardner.

Js fiiddle http://jsfiddle.net/Qk5vR/1/

Upvotes: 9

Quentin
Quentin

Reputation: 943185

Both means "every item in a set of two things". The two things being "left" and "right"

Upvotes: 42

Related Questions