CODEWITHSUNDEEP
csshtml
Tenshiko
Tenshiko

Reputation: 1470

How to force div width with CSS to stretch to its content but not to be restricted by its container?

I'm trying to make a HTML "showcase". I am thinking of using elements like this:

<div id="index-showcase-tabs">
    <div id="index-showcase-tabslide">                    
        <div class="index-showcase-tab" id="showcase-tab-1">Item1</div>
        <div class="index-showcase-tab" id="showcase-tab-2">Item2</div>
        ...
        <div class="index-showcase-tab" id="showcase-tab-N">ItemN</div>
    </div>
</div>

The showcase items are floated left, and I don't know their precise width, nor the number of them. Problem is: if the combined width of the items is bigger than the container (index-showcase-tabs), I don't want them to break line (which they do by default). I want them in one line, and I want to hide the overflow and then let the user scroll them with javascript (not by scrollbar...).

How would I do that?


PS: There's not much css for the items yet. I only gave the slider a specific heigth:

#index-showcase-tabslide
{
    height: 34px;
}

Edit: Here you can see my problem.
Edit2: explaining more with a fiddle: http://jsfiddle.net/TbSfj/19/

Upvotes: 4

Views: 7663

Answers (2)

vinczemarton
vinczemarton

Reputation: 8156

check out this sexy control:

http://jsfiddle.net/SoonDead/U6QdQ/20/

this way made for my project, but I think it does what you want.

The tricks are:

Because you use a lot of characters that can "linebreak" and even forcefully disable linebreaks have different results in 1-2 browsers, I would recommend against it.

Instead make the overflowing width wide enough to hold all the elements easily, so if javascript is disabled it will not look ugly.

(I know that you are fine with jquery, so I use it within the example, also the outerWidth property in simple js has bugs in webkit (tends to be 0 in some cases).)

So you need to sum up the elements' outerWidth() and set the content holder's width, so you can use scrollLeft, and not overscroll.

There is no other trick, just a scrollTo function because calculating positions are not that trivial if you are new to jquery and you might want to use that.

Upvotes: 0

jacktheripper
jacktheripper

Reputation: 14219

For this, you cannot use float: left. Instead use display: inline - this will have the same effect for what you want to accomplish, and it will not be constrained to the parent div in the DOM model.

Upvotes: 2

Related Questions