Divs in same line only on a wider window - css

Question

See: fiddle
When the window is long enough, both divs are in the same line, but when it's smaller, the second div(.footers) moves to a new line. I wan't them to be in the same line all the time.
Css from the left div:
.footer .footer_links {
float: left;
width: 250px;
padding: 25px 0px 0px 20px;
min-height: 95px;
border-right: 1px solid #d9d9d9;
text-align: left;
}
Css from the right div:
.footer .footers {
text-align: left;
float: left;
padding: 0px 20px 0px 20px;
}
What is causing this problem?

Answer 1

If you only want to give the left div (.footer_links) a fixed height, instead of floating the div on the right (.footers), give it overflow:hidden. This will cause it to fill the remaining width of the page:
.footer .footers {
text-align: left;
overflow:hidden;
padding: 0px 20px 0px 20px;
}
JSFiddle

Answer 2

.footer .footer_links {
float: left;
width: 20%; // In percent
padding: 25px 0px 0px 20px;
min-height: 95px;
border-right: 1px solid #d9d9d9;
text-align: left;
}
.footer .footers {
text-align: left;
float: left;
width:70%; // In percent
padding: 0px 20px 0px 20px;
}

Answer 3

You can add to a .footers div a white-space , and fixed height:
.footer .footers {
text-align: left;
float: left;
padding: 0px 20px 0px 20px;
white-space: nowrap;
height: 20px;
}

Answer 4

try this give max-width:
DEMO
CSS
footer {
background: #f2f2f2 !important;
margin-top: 20px;
padding: 10px 0px 10px 0px;
}
.footer .footer_links {
float: left;
width: 250px;
padding: 25px 0px 0px 20px;
min-height: 95px;
border-right: 1px solid #d9d9d9;
text-align: left;
}
.footer a {
font-size: 14px;
color: #898989 !important;
}
.footer .footers {
text-align: left;
overflow:hidden;
padding: 0px 20px 0px 20px;
}
.footer .footers p {
font-size: 14px;
color: #898989;
line-height: 20px;
}
.clear{
clear: both;
}
in DEMO2 you have write max-width: then its working
DEMO2
CSS
.footer .footers {
text-align: left;
float: left;
padding: 0px 20px 0px 20px;
max-width:300px;
}