CODEWITHSUNDEEP
htmlcss
Zak
Zak

Reputation: 2698

How do you force divs on to the same line, even if it means they get pushed beyond the edge of the browser?

I'm working on a jquery slider, except instead of using a fixed-width container, I'm using the whole browser window. I've got jQuery set up to fix the margins to make sure it's centered correctly (although I just made them 500 pixels in the demo to keep it simple), but the problem is when I try to add more divs, it puts them on a second line instead of putting them beyond the edge of the browser. Here is my code: http://jsfiddle.net/JsPZT/

Eventually, I'll change the overflow so that they are hidden when they are beyond the edge of the browser, but for now, I just want to know that they are on the same line and not being pushed onto the second.

So my question is what should I change in the CSS to make sure the divs are always on the same line, even if it means pushing them beyond the edge of the window?

Upvotes: 3

Views: 8465

Answers (3)

BCDeWitt
BCDeWitt

Reputation: 4773

To get divs to stay on the same line when they are off of the screen, you have several options. Here's what I can think of off the top of my head.

Make the parent container always large enough to hold the divs you want to float. Theoretically, they shouldn't jump down to the next line that way, but I haven't tried it myself.

Another option is to use a combination of display:table and display:table-cell on the parent and children divs respectively. You just have to make sure you are supporting the browsers you want to support.

My last idea is to set each div with position:absolute. Then, just adjust the left attribute to 100% * x to place the div off the screen to the left or right. Depending on what you are trying to do, when they are off the viewable area you could just leave them at left:-100% or 100%. The same should work for the top attribute if you want the div to be off the screen above or below the viewable area.

Upvotes: 6

Aaron Digulla
Aaron Digulla

Reputation: 328556

Try white-space: nowrap;

If that doesn't work, you will probably need an inner div with a width that's the sum of all contained divs.

Upvotes: 5

Kyle Undefined
Kyle Undefined

Reputation: 776

You need to add a width to your #track CSS. That is your wrapper, and without a width on that, the items will just overflow and drop to the next line. You'll probably have to add another div to set the overflow and get everything positioned correctly.

Upvotes: 3

Related Questions