CODEWITHSUNDEEP
htmlcsscss-float
dkjain
dkjain

Reputation: 871

CSS Floats: clear on parent does not expand it to contain floated children

In this fiddle , the parent <p> tag contains an <img> tag which is floated left float: left however the parent <p> tag does not expand to fully encompass the floated img element although I have clear:both set on parent <p> tag.

I know that adding an extra div with clear:both before closing </p> or overflow:auto on <p> will do the job but I am at wits end as to why clear:both set on <p> tag does not work as I expect.

Can anybody explain this behavior?

.thumbnail-desc h2 {
  display: inline-block;
  background: blue;
  color: #fff;
  padding: 5px 7px;
  margin-bottom: 0;
}
.thumbnail-desc img {
  float: left;
  width: 200px;
  max-height: 200px;
  margin-left: initial;
  margin-right: 10px;
  margin-bottom: 10px;
  border: 1px solid #ddd;
  overflow: hidden;
}
.thumbnail-desc p {
  background-color: #fff;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.01);
  padding: 15px;
  font-size: 18px;
  clear: both;
  margin-bottom: 20px;
  margin-top: 0;
}
<div class="thumbnail-desc">
  <h2>Some title</h2>
  <p>
    <img src="http://i.huffpost.com/gen/1632280/images/n-VISION-200x150.jpg" alt="Our Vision">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi nihil dignissimos. Some crazy text.Some crazy text</p>
</div>

Upvotes: 1

Views: 96

Answers (4)

user379888
user379888

Reputation:

Instead of covering the image with a p tag, use a class and a div.

Fiddle.

HTML:

<div class="thumbnail-desc">
<h2>Some title</h2>
<div class="outer">
<img src="http://i.huffpost.com/gen/1632280/images/n-VISION-200x150.jpg" alt="Our Vision">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi nihil dignissimos. Some crazy text.Some crazy text
</div>
</div>

CSS:

.thumbnail-desc h2 {  display: inline-block;
            background: blue;
            color: #fff;
            padding: 5px 7px;
            margin-bottom: 0; }

.thumbnail-desc img {
     float: left;
    width: 200px;
    max-height: 200px;
    margin-left: initial;
    margin-right: 10px;
    margin-bottom: 10px;
    border: 1px solid #ddd;
    overflow: hidden; }
.thumbnail-desc .outer {
    background-color: #fff;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.01);
    padding: 15px;
    font-size: 18px;
    height:150px;
    }

Why your code does not work as you thought?

Because the p tag is for the text. It's height is as much as the text inside the div. For more height, you need to switch to a div or span.

Upvotes: 2

Yash Jain
Yash Jain

Reputation: 1

You need to set your .thumbnail-desc p to the display of inline-block.

Upvotes: 1

Stuart
Stuart

Reputation: 6785

It seems you may misunderstand how clear works.

Setting clear:both on the <p> tag is telling the p to clear anything that comes before it - not the child items within it.

Upvotes: 4

Mindaugas M.
Mindaugas M.

Reputation: 121

You can add overflow: hidden; for <p>. Here is example: https://jsfiddle.net/hnL0gLy2/

Upvotes: 3

Related Questions