How to force inner div to never span new line, do fixed outer main div

[Fli]

Hi, on the site, there is an row of 125x125pixel banners, it was like this:


<div>
<div id="inner1"></div>
<div id="inner2"></div>
<div id="inner3"></div>
<script src="http://cdn.publicityclerks.com/core/ad/1234/123"></script>
<a href="xyxy"><img src="xy" width="125" height="125" border="0" /></a>
</div>


so i have around 5 elements that i wanted to have in one row, not spanned to new lines...

This is how i wanted it to be:
200

But one div was externally set to span to new line (even on the line is enough space for it to show):
201

What is outer div and what is inner div?
<div> <--- this is outer div
<div></div> <--- this is inner div
</div>

So i tried 3 options on how to set div height or stoping inner divs to span to new line even there is enough space on existing line.


OPTION 1 - do not span inner div to a new line (this is one i needed to achieve)

Outer div without parameters and inner div has "float: left;display: inline;" parameters which making sure that inner div is not spanned to new line (unless web browser window is very small like we see on image):

199

and in wide browser window, it shows nicelly:
200


<div>
<div id="inner1" style="float: left;display: inline;"></div>
<div id="inner2"></div>
<div id="inner3"></div>
<script src="http://cdn.publicityclerks.com/core/ad/1234/123"></script>
<a href="xyxy"><img src="xy" width="125" height="125" border="0" /></a>
</div>


Note: If your problematic inner div is the last one of inner divs, then you might float it to the right instead of left



OPTION 2 - fixed height of outer div (scrollbars)

Inner div do not have "float: left;display: inline;" parameters, so inner div spans to new line, but we keep fixed height of outer div, so there is a scrollbar

198


<div style="overflow: auto; max-height: 128px;">
<div id="inner1"></div>
<div id="inner2"></div>
<div id="inner3"></div>
<script src="http://cdn.publicityclerks.com/core/ad/1234/123"></script>
<a href="xyxy"><img src="xy" width="125" height="125" border="0" /></a>
</div>




OPTION 3 - fixed height of outer div + make sure inner divs do not span to new line

Fixed outer div height + do not span inner div to the new line:

197


<div style="overflow: auto; max-height: 128px;">
<div id="inner1" style="float: left;display: inline;"></div>
<div id="inner2"></div>
<div id="inner3"></div>
<script src="http://cdn.publicityclerks.com/core/ad/1234/123"></script>
<a href="xyxy"><img src="xy" width="125" height="125" border="0" /></a>
</div>