Span style float:left is breaking div block

Question

I'm working on maintaining a bit of code that's out of whack at the moment. Basically, we have a <div> tag with it's own style settings, and we have multiple logic tags that will display different <span> tags, which will hold different bits of data.

What I'm seeing is that when I'm using a <span> tag with a style setting float: left; this is causing the <div> tag's color box to not wrap around the <span>.

Here's a sample of the code:

<div id="testData" style="padding:4px; width: 100%; border: 1px solid #999; background: #d1d1d1; text-align:right;">
    <span style="padding: 3px 1 1 1; float:left;">
         TestData: Float Left
    </span>    
</div>

I need this span tag to go left, due to requirements. Was wondering what my options are for this to work?

Original jsFiddle

For starters, I would strongly advise against using inline styles. Keeping your styles in one place (stylesheets) is the easier route to go in most cases (as far as maintaining code is concerned). — Josh Beam, Aug 31 '15 at 19:29
Actually, the styles that are shown in the div and span tags in the section above are pulled from the CSS. However, even there I'm seeing the same result (the shaded box does not wrap around the text that is in the span tag) — IcyNeko, Aug 31 '15 at 21:50

score 0 · Answer 1 · answered Aug 31 '15 at 19:30

0

Add overflow:auto to the parent div:

#testData {
    overflow:auto;
}

jsFiddle example

answered Aug 31 '15 at 19:30

j08691

204,283
31
260
272

score 0 · Answer 2 · answered Aug 31 '15 at 19:32

Other way is to make use of clear: both

#testData:after {
    clear: both;
    display: block;
    content: "";
}

Fiddle

Other solutions:

Using overflow: hidden

#testData {
  overflow: hidden;
}

Or making a dummy element <div class="clearBoth"></div>

HTML

<div id="testData" style="padding:4px; width: 100%; border: 1px solid #999; background: #d1d1d1; text-align:right;">
    <span style="padding: 3px 1 1 1; float:left;">
         TestData: Float Left
    </span>    
  <div class="clearBoth"></div>
</div>

CSS

.clearBoth {
  clear: both;
}

score -1 · Accepted Answer · edited May 23 '17 at 10:27

http://jsfiddle.net/gLfw5wc7/3/

#testData {
    padding:4px;
    width: 100%;
    border: 1px solid #999;
    background: #d1d1d1;
    text-align:right;
}
#testData:after {
    content:"";
    clear: both;
    display: table;
}
#testData > span {
    padding: 3px 1px 1px;
    float:left;
}

This is known as a clearfix. When floating an element, it gets out "the flow" of the document. This also means that its width and height aren't taken into account by the parent. That's why #testData seems to collapse: it thinks it doesn't have content. To fix this there are some options. The easiest is to use overflow, however, that's bad practice imo. In this particular case it works, but in some other cases you won't be able to use it because content that overflows the parent will either be hidden (overflow: hidden) or a scrollbar will appear (overflow: auto).

The most common and proper solution is to use a pseudo element to fix this. :after is such a pseudo element (see this question for :after vs ::after). Basically, a pseudo element can create an element in CSS that is not visible in HTML.

Every time you use float, you'll be needing a clearfix. Therefore it's useful to create a .clear class which you can apply to every element that needs to clear floats. It would look like this.

HTML

<div id="testData" class="clear">
    <span>
         TestData: Float Left
    </span> 
</div>

CSS

.clear:after {
    content:"";
    clear: both;
    display: table;
}

Now you can add class="clear" to every element that needs to be cleared. If you are into SASS, you might find this answer helpful but considering you are new to HTML, I'd suggest sticking to HTML and CSS first.

Span style float:left is breaking div block

3 Answers3