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:
Name:  outer_div-no_parameters_inner_div_display-inline_float-left.jpg
Views: 24
Size:  33.0 KB

But one div was externally set to span to new line (even on the line is enough space for it to show):
Name:  outer_div_and_inner_divs_spans_to_new_line.jpg
Views: 22
Size:  33.7 KB

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):

Name:  outer_div-no_parameters_inner_div_display-inline_float-left0.jpg
Views: 20
Size:  51.2 KB

and in wide browser window, it shows nicelly:
Name:  outer_div-no_parameters_inner_div_display-inline_float-left.jpg
Views: 24
Size:  33.0 KB

<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

Name:  fixed-height-outer-div_without_display-inline_without_float_inner_div.jpg
Views: 23
Size:  26.3 KB

<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:

Name:  fixed-height-outer-div.jpg
Views: 26
Size:  43.3 KB

<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>