CODEWITHSUNDEEP
htmlcsstagsfigure
Azuk
Azuk

Reputation: 197

Float on img tag is OK not when applied on figure tag

lately while doing some tests with the figure tag I noticed something odd. While I can easily float an image tag inside a paragraph and keep the background color of the paragraph under the paragraph and the image itself. I can't get similar result with a floating figure tag encompassing my image.

Instead of talking, here two links to be sure you understand the issue I have:

Simple image floated along paragraph which works fine: here

Same but with a figure tag encompassing the image tag but not working as expected: here

How to have the same result while using the figure tag ?

Here is the code but check codepen, the problem is going to be obvious.

HTML structure (

<div class="wrapper">

    <p class="clearfix">

   <img class="fox" src="http://raptorimages.hu/wp-content/gallery/blog/fox_img_9734_w500_kovacsa.jpg" alt="fox" >
<!-- the figure tag is supposed to work such as the image tag above when uncommented -->
  <!--<figure class="fox"> 
   <img src="http://raptorimages.hu/wp-content/gallery  /blog/fox_img_9734_w500_kovacsa.jpg" alt="fox" >
  <figcaption>Running fox</figcaption>
  </figure>-->

  </p>

  <p>Praesent non risus enim. Duis ac mi tempus, feugiat nunc non, vestibulum magna. Curabitur in tempor lorem. Mauris fermentum vulputate </p>

</div>

CSS

*{
  box-sizing:border-box;
}
.wrapper{
  width:90%;
  background:#cecece;
  margin: 0 auto;
  padding: 1.1111111%;
}

.wrapper p{

  background-color:grey;
  padding:1.111111%;

}

.fox{
  float:right;
  padding:0 0 0 1.1111%;
}

img,video,object,embed{
  max-width:100%;
}

.clearfix:after {
   content: " "; /* Older browser do not support empty content */
   visibility: hidden;
   display: block;
   height: 0;
   clear: both;
}

Upvotes: 0

Views: 354

Answers (1)

Nishanth Matha
Nishanth Matha

Reputation: 6081

According to W3 org,which is the standard for web. P can only have Phrasing elements.

img is a phrasing element so <p class="clearfix"><img class='fox' /></p> is valid html and your browser process it as expected.

figure is NOT a phrasing element so <p class="clearfix"><figure class='fox'></figure></p> is NOT valid html and your browser corrects it by changing it to <p class="clearfix"></p><figure class="fox"></figure><p class="clearfix"></p> process it accordingly. So you get different output.

P.S: It's because how your browser renders html

Upvotes: 1

Related Questions