Menu
I have this:
<style>
.out {width: 90px; overflow:auto;}
.con {}
.dst {}
img { margin-left: 3px; }
</style><body>
<div class='out'>
<div class='con'>
<div class='dst'>
blablabla bla<img >
</div></div></div>
I want the content of the dst div to stay on one line (in the real case out width is 15%). I want it to works in ie6, 7, so no "white-space:nowrap". I know that there are many questions about this but I found no solution. The only solution now is:
.con { width: 300px; }
But this way the scroll bar is always visible and I want to see it only when needed. Thanks.
Edited: Now there is no space before the img, just margin, but still goes on a new line!
300
.out {width: 90px; overflow:auto;}
.con {}
.dst {}
.dst span{
white-space:nowrap;
}
img { margin-left: 3px; }<div class='out'>
<div class='con'>
<div class='dst'>
<span>blablabla bla</span>
<img >
</div>
</div>
</div>You need to wrap your text in <span> tag to work in IE6 & IE7.
Here is a Reference Link
Here is JSFiddle
PS : For Text and Image side by side you can check this
Hope this helps.
98
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
