5 Attachment(s)
How to force inner div to never span new line, do fixed outer main div
Hi, on the site, there is an row of 125x125pixel banners, it was like this:
Quote:
<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:
Attachment 200
But one div was externally set to span to new line (even on the line is enough space for it to show):
Attachment 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):
Attachment 199
and in wide browser window, it shows nicelly:
Attachment 200
Quote:
<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
Attachment 198
Quote:
<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:
Attachment 197
Quote:
<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>
