Make A Div Scroll In One Line

I need to have the text in a One-Line scrolling div, fitting inside both divs. http://jsfiddle.net/F6pNm/26/ The goal is for all to fit on one line! EDIT: I guess I wasn't specific

Solution 1:

If I read you correctly, you don't what your text to break, but to keep on going never leaving the line #1, so you can use CSS like this:

Fiddle Example!

YOUR CSS UPDATED

#flash {
    float:left;
    width: auto;
    font-size: small;
    font-style: italic;
    text-align: center;
    white-space:nowrap;
}

The difference is the white-space:nowrap;

For does who can't see it:

---

EDITED to contemplate the edited question issue!

The new Fiddle!

---

EDITED to contemplate the fact that all divs inside the footer must be side by side!

The updated Fiddle!

Take note that this solution uses Jquery to collect in real time the width of each div and sum all together to set the footer div. Without it, it can't be done!

---

EDITED to have all 3 divs side by side within the wrapper width

in the Fiddle example, the wrapper is the body

The new Fiddle!

Solution 2:

#flash {
    float:left;
    width: auto;
    font-size: small;
    font-style: italic;
    text-align: center;
    white-space:nowrap;  /* will put text in 1 line */overflow-x:scroll;   /* will add horizontal scroll bar should the length exceed the container */
}

Solution 3:

as far as I know There is no way * to have 3 divs compete over the same space (100%), when they are all set to width:auto;. Even if you use overflow, or in-line, or the other methods suggested so far, I think the left div will always take the space it needs, then the middle, then the right... unless you use set widths

I don't know if that's possible since you are using width:auto;. that seems to allow the div to expand as wide as it wants, thus making it too large to fit in only the one line.

if you changed the links to set size, such as width:10%, then 4 of those links leaves you with 60%, so you can set #flash {width:60%; overflow-x:auto;} to have it scrollable and one line

Solution 4:

Using JQuery, I have the middle div changing size based on the left and right div's.

jquery:

$(function () {
   var midWidth = $(document).width() - ($('#left').width() + $('#right').width());
   $('#flash').width(midWidth);
});

Fiddle Example

Hope this helps.

EDIT: Added to the css of the div:

height: 36px;
overflow: scroll;

Its closer to what you probably want. I am not sure how to get the box displaying one line only.

Fiddle Update

Solution 5:

remove float:left

#flash { 
    font-size: small;
    font-style: italic;
    text-align: center;
    white-space:nowrap;
    overflow-x:scroll;
}​

Try This:

http://jsfiddle.net/damsarabi/F6pNm/40/