@WebJoelMar 28.2009 — #You can't use an 'inline element' ("span") to contain a 'block-level element' ("DIV", "H1-5" inclusive, "P", etc.) This will not work.
<div id="support">
[B]<span class="floatleft"> [/B]
<div class="box"><div id="center">
<h4>Try The Demo</h4>
</div>
<p class="small_text">Photoweb is a unique service that lets your guests view pictures of the party online. Throughout your event, we will take candid shots of partygoers. Within 2 business days, your photos will be available online to view.</p>
<p class="small_text">To learn more, visit the <a href="http://www.photowebevents.com/about.php">Photoweb information</a> page.</p>
<p class="small_text_center">Try it out <a target=new href="http://www.photowebevents.com">Login Here</a><br />
Web ID: <b>web</b><br />Security Code: <b>test</b></p>
</div>[B]</span>[/B][/QUOTE] You need to correct the code before the issue of floating boxes 'side-by-side' can be achieved. :o
Get this bad-code fixed, and "[B] .box {float:left;} [/B]" is probably all you need...
} [/QUOTE] -Have not quite decided what you are [B]trying to do here[/B] with code like this... You have got waaaay too many DIVs in this. "DIVitis" is what this is called. For example: You do not need to create a "DIV" just to place an "H" tag in it and center, -just use the "H" tag, give it width with "text-align:center;" and you have said the same thing with 50% less code.
Other [COLOR="Red"]redundancies[/COLOR] are many... ?
@WebJoelMar 28.2009 — #You probably didn't fix the errors in the code though... :p
I'll grab your code and work it offline for awhile. You have several redundancies there that can be removed, and fixing the errors is first call. ?
back:
that was easy... your 'parent' container for the DIVs ".box" has a problem. This:
<div id="support" [B]style="width:100%;"[/B]>
fixes it.
.box still needs "float:left;" though. Problem was, the 'parent' container for these boxes was not wide enough. Now with "width:100%", the "#support" expands to the full width of IT'S parent container, -and everything fits nicely.
I would get rid of superfluous coding:
<div class="box">[B]<div id="center">[/B]
<h4>Try The Demo</h4>
[B]</div>[/B][/QUOTE] can become
<div class="box">
<h4>Try The Demo</h4>
...[/QUOTE] because the "h" tag is a "block-level element" which means it is 100% width of the parent DIV anyway (so, 'centering' it is meaningless,) and 'block-level' also forces a 'line-return' and does not therefore require a 'container.' It 'contains itself' so, style [I]it[/I] instead..
<div class="box">
<h4 [B]style="text-align:center;[/B]">Try The Demo</h4>
... [/QUOTE] etc. (here, I 'center' the H4, but if you want "text-align:left;" that is default, or "text-align:right;" is also a choice)
You save a browser from having to drill-down through unnecessary DIVs, reduces coding, faster load-time, easier to edit, reduced bandwidth, etc etc.. :-)
I used 'inline style' here, you would want to export this to your external CSS page