CODEWITHSUNDEEP
csscss-float
Dr. Chocolate
Dr. Chocolate

Reputation: 2165

Floated element keeps full "original" width of inner narrower block element

I have a possibly simple question.

I have a floated element with a block element inside.

Adding text inside the block element expands the block element horizontally as well as the parent float (like it's supposed to).

If I add a width to the inner block element, the text is wrapped and the block element becomes that width.

However, the floated element is still as wide as the block element would be without a width set on it, where I would expect it to shrink down to the set width of the block element.

Does the text have an invisible width?

Here's a very simple fiddle that shows what I'm talking about.

http://jsfiddle.net/bup88/

.thumbs li
{
   float:left;
  border:solid 1px black;
}
.thumbs div
{
  width:20%;
  border:solid 1px red;
}



<ul class="thumbs">
  <li>
 <img src="http://placehold.it/250X250" /> 
  <div>
    some text some text some text some text some text some textsome text some text
  </div>
</li>
</ul>

Why does the floated element stay as wide as the block element would without the width rule?

Upvotes: 2

Views: 259

Answers (4)

G-Cyrillus
G-Cyrillus

Reputation: 105923

You set width:20%; to a block wich parent has no width for reference.

What i find strange is to see that, because <li> is floatting, you still get this 20% of a <li> that somehow browsers sizes at average size of the div itself ? So in the end , the div takes 100% of its content, then resize to 20% of itself width.

If <li> has a width in CSS, then it wraps as it should.

if div has a value, exept % value, it wraps

It bugs cause your CSS is not coherent somehow :)

http://jsfiddle.net/bup88/4/

Upvotes: 2

Alex
Alex

Reputation: 834

A better option would be to use inline-block on the child elements of thumbs this allows the text to fill a space as big or small as you need. If you remove the width, it will fill the remaining space.

.thumbs img {
  display: inline-block;
  vertical-align: top;
  zoom: 1;
}
.thumbs div
{
  display: inline-block;
  vertical-align: top;
  width:20%;
  border:solid 1px red;
  zoom: 1;
}

Upvotes: 1

ajp15243
ajp15243

Reputation: 7950

I'm not a CSS expert, so if any below assumptions are incorrect someone let me know.

I think it's due to your usage of a percentage width on the block element, which will look at the parent element (the floated one) for the width value it should be using with the percentage to compute a final width.

In order to figure out this percentage width, I'm guessing the layout engine is first computing how wide the block element would be without the percentage rule, then setting the floated parent element to that width as it would if the percentage rule were not present. Now that the floated element has a defined width, the child block element can have its percentage width computed. This computation won't affect the width of the floated parent element, however, as that is already laid out.

Setting the width to something definite like px, or changing the layout type from block to inline (like j08691 suggested) will make it behave more how you expected.

Upvotes: 2

rpasianotto
rpasianotto

Reputation: 1413

CHANGE THAT WAY:

.thumbs div{
  float:right;/* UPDATE WITH */
  width:20%;/* CHANGE WITH THE SIZE THAT YOU WANT FOR THE DIV */
  border:solid 1px red;
}
.thums img{
  float:left;
}

Than all will fit horizontal.

Upvotes: 1

Related Questions