Does a float need a width?

Question

After a lot of research about floats i am confused why there is so much information on the web that a float should always have a width defined. It is often said, that the float will take the whole space and therefore behave like a normal block element. but with regard to the information here http://www.w3.org/TR/CSS21/visudet.html#shrink-to-fit-float the float will always shrink-to-fit. as i understand the float will never take the whole space unless it needs to.

when thinking about navigation items, is there a need to specify a width? i don't think in this case. maybe when content inside the float is too large?

it was also discussed here Do you really need a width on floated element? but there is no clear statement, that this is not necessary.

Depends what you are trying to do with it. Short answer, no. But long answer - would depend what you are trying to achieve using the float. — ajmajmajma, Apr 22 '15 at 18:51
_" it is often said, that the float will take the whole space and therefore behave like a normal block element"_ um, where'd you read that? — j08691, Apr 22 '15 at 18:56

score 0 · Accepted Answer · answered Apr 22 '15 at 19:26

I don't think all floated elements require fixed widths, but perhaps any positional CSS that includes dividing your page into 3 columns, you may want to consider fixing the widths on the columns floated to left/right. One reason for this is because navigation bars or forum posts or some sort of list of hyper links is often aligned on the sides of the pages, and if these 2 columns are not fixed, the character limit of your anchor links will be limited as the screen size decreases. You may not want your inline anchor tags wrapping across multiple lines when the screen shrinks. Fixed Widths would eliminate this.

score 0 · Answer 2 · edited May 23 '17 at 12:34

0

Floats dont need a width. The advantage and disadvantage as well is a collapsing container, if there is no content in it. Have a look at: Expand div to max width when float:left is set

Deleting all p-tags in the div-tag (class right) shows the effect: no more red background

.content .left{
 float:left;
 width:100px;
 background-color:green;
}
.content .right{
 margin-left:100px;
 background-color:red;
}

<div class="content">
 <div class="left">
  <p>Hi @ all</p>
 </div>
 <div class="right">  
  <!-- no content no backgroundcolor -->
 </div>
</div>

edited May 23 '17 at 12:34

Community

1
1

answered Apr 22 '15 at 19:46

Dirk Jüttner

41
6

hi @Dirk Jüttner, i don´d understand the point you are trying to make? isn´t it normal block element behavior that elements shrink to zero height if there is no content inside of them and no height is defined? i don´t understand what this has to do with floats? see here: [link](https://jsfiddle.net/r8La7cdn/) – offline Apr 23 '15 at 09:05
@Alex Di Vito 1. Floats dont need a dimension. If a content inner of a float is bigger the the column itself it looks like this: https://jsfiddle.net/r8La7cdn/1/ – Dirk Jüttner Apr 24 '15 at 18:15

Does a float need a width?

2 Answers2