Force contents of DIV not to wrap - css

Question

I have a DIV defined thusly:
<div id="divContent" class="content" style="margin-left:239px;min-height: 100%; padding: 130px 80px 30px 80px; overflow: hidden;">
The contents of the div are complex and varied, including lots of different html and css. All I want is to force the contents of the div NOT to wrap, so that as you drag the right edge of the browser window in toward the left edge, content may disappear off the right side, but never wrap.
I have already tried applying this CSS on the divContent div, and also on sub-divs inside divContent, but it did nothing:
white-space: nowrap
What options do I have?
<< EDIT >>
Here's the actual web page.
Here's how it looks (correctly) before making the page smaller:
Here's how it looks (wrongly) after making the page smaller, and it starts wrapping:

Answer 1

Adding overflow:hidden to the element's style, will cause any text that would have flowed out of the div to be hidden. you should remove it and replace it with white-space:nowrap
<div id="divContent" class="content"
style="margin-left:239px;min-height: 100%;
padding: 130px 80px 30px 80px; white-space:nowrap;">

Answer 2

Ok, thanks for adding a link to the code. My, do you you have a lot of stuff in that div? (It always helps to give the full picture with a question!) And that's the problem - specifically the label/input field pairs. These are inside dd elements, which are inside a div with class = column-thirds. That has a percentage width, which means they shrink as the window shrinks.
But there is nothing to stop the input fields dropping under their labels as the columns shrink in width. So that's what you need to stop. Adding nowrap to their containing elements (the DD elements), and a width as well to stop the label and field overflowing the end of the DD element, should do it:
dd {
white-space: nowrap;
width : 400px; /* choose your width here to be wider than the label + field */
}
to stop these items wrapping. (And check there is no float property on the labels or input fields, which might also be part of the problem).
[Further edit]
Unfortunately your setup is rather complicated. So to show the nowrap solution is basically correct: do a small test, with a bank page containing just one of your label field pairs:
<dl><dd>
<label for="txtFirstName" id="lblFirstName" title="First Name" data-required="true">First Name</label>
<input name="txtFirstName" type="text" value="Frankie8" id="txtFirstName" data-capture="DLFirstName" style="width:131px" />
</dd></dl>
and some CSS:
dd {
margin-left: 400px;
border:2px solid black;
white-space: nowrap;
}
Then narrow your window until the right window margin overlaps the field, then comment out the white-space line; you'll see the field drop down under the label. (I've tried it, it works as expected). Hopefully that shows what the basic problem to solve is.
However, looking through your CSS files I see you have a media query in the LESS file Style.less (look for #media around line 1976), that redefines labels as block elements, using display: block. That stops the above nowrap solution working. Labels are normally inline elements. So either you need to be able to get rid of that display change if you can, or find another solution.
An alternative solution would be to give the containing divs (the class = column-thirds ones), a min-width to stop them shrinking so much they cause your wrapping problem in the first place. The only other thing I can think of might be floating the labels, but I wouldn't like to bet how that would turn out.
I hope this all helps you obtain a suitable fix for your problem.

Answer 3

You need to set the width to the size you want the div to be, in px units, e.g.:
... width: 500px; ...
Then, if the screen gets narrower than that, the div will disappear off the right of the screen as required, regardless of the overflow setting.
It often helps in problems like this to give all the divs borders temporarily, eg with: border 1px solid red; so you can see what's happening.
Overflow only comes into play if you fix both the width and height of the div, and the text is too long to fit in that box - it will then spread down below the div. White-space looks as though it works, because it makes the text stick to one line, until you give the div a border and realise that the div still ends at the edge of the screen (however wide that may be at any given moment) and the text now extends beyond the end of the div (which you can see if you add the border, and remove the overflow hidden).
So fixing the width of the div, if done right, should work (I've used 500px, but change that to whatever you want):
<div id="divContent" class="content" style="width: 500px; margin-left:239px;min-height: 100%; padding: 130px 80px 30px 80px; overflow: hidden;">
However, a lot depends on what content you have in your div, and what CSS they have, so if fixing the width like this doesn't work, give us those as well, please.