3

I'm trying to build a kind of tag-cloud. I've a div (the tag container) in which dinamically I add span nodes (the tags).

span nodes are default inline elements, so if I've set their display property do display:block, to prevent that they will overflow the div horizontally.

I've also set their float property to float:left since I want that they're disposed near on the same line and if line is full tthey automatically go to the next line.

The problem now is that, the tags overflow vertically on the bottom. The tag container does not resize its height to contain all the tags inserted. How could I fix this problem?

EDIT Here is the fiddle. http://jsfiddle.net/Vk92s/1/

As you can see, if a comment float: left, the div automatically resize, but all the tags dispose on a new line. At opposite, if i add the float: left, the tags wrap correctly, but div does not resize.

1
  • 3
    Can you setup a fiddle that shows the problem? Sep 8, 2011 at 18:36

4 Answers 4

4

Here's a fiddle.

You can set overflow to hidden, like below:

<div id="test"> 
    <span>first</span> 
    <span>second </span> 
    <span>third </span> 
    <span>fourth </span> 
</div> 

#test
{
   border: 1px solid black;
   width: 100px; 
   overflow: hidden; 
}
span
{
  float: left;
}
1
  • Hmm, interesting, I've always been bothered about needing a clear node that's semantically useless. Are there any gotchas about using overflow: hidden; instead of clearing the float?
    – Davy8
    Sep 8, 2011 at 22:33
3

In your tag container div, add this css rule:

overflow: auto;

This will make it expand to contain its floated content.

Edit:

A fiddle: http://jsfiddle.net/5AgxU/

3

Try adding a div that has clear: both set under all of your elements.

Working Demo

HTML

<div id="tag-cloud">
    <span class="tag">example</span>
    <span class="tag">example</span>
    <span class="tag">example</span>
    <span class="tag">example</span>
    <span class="tag">example</span>
    <span class="tag">example</span>
    <span class="tag">example</span>
    <span class="tag">example</span>
    <div class="clear-both"></div>
</div>

CSS

.tag{
    display: block;
    width: 98px;
    background-color: red;
    margin-right: 2px;
    float: left;
}
.clear-both{
    clear: both;
}
#tag-cloud{
    width: 300px;
    background-color: black;
}
2
  • Actually, your fiddle does not include your clear: both solution.
    – pimvdb
    Sep 8, 2011 at 18:55
  • ha, weird i must not have saved it. Sep 8, 2011 at 22:23
0

Rather than adding an empty element that clears your float, my preference is to use the following on the parent element so you don't pollute your markup.

.clearfix:after {
   content: ".";
   display: block;
   clear: both;
   visibility: hidden;
   line-height: 0;
   height: 0;
}

.clearfix {
   display: inline-block;
}

html[xmlns] .clearfix {
   display: block;
}

* html .clearfix {
   height: 1%;
   overflow: visible;
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.