CSS not floating correctly

Im the first to admit it, Im well out of my depth when it comes to CSS, but I cannot figure this out.

Ive got a simple treeview style div, which for some reason doesnt have the title next to the folder:-
 Screenshot of issue
I know site3 is different, because of the way I want it, but Site1, 2 and 4 should have the text to the right of the folder icon, but it doesnt.

My code is:-
<div id="divTreeContent" style="width:300px; height:500px; float:left; text-align:left; font-size:12px;">
         <div id="divFolder_70758-67211-94570" style="border-style:solid; border-width:1px; float: left; width: 100%; margin-left:0px;">
                <img id="fldImg_70758-67211-94570" src="folderClosedPlus.jpg" alt="Site1" onClick="Javascript:ocNode('70758-67211-94570', 0);" />
                <div style="float: left; "onClick="Javascript:loadTable('70758-67211-94570');">Site1</div>
         </div>

         <div id="divFolder_25451-61271-77516" style="border-style:solid; border-width:1px; float: left; width: 100%; margin-left:0px;">
                <img id="fldImg_25451-61271-77516" src="folderClosedPlus.jpg" alt="Site2" onClick="Javascript:ocNode('25451-61271-77516', 0);" />
                <div style="float: left; "onClick="Javascript:loadTable('25451-61271-77516');">Site2</div>
         </div>
         
         <div id="divFolder_35912-35858-18171" style="float: left; width: 100%; margin-left:0px;">
                <img id="fldImg_35912-35858-18171" src="folderClosed.jpg" alt="Site3" onClick="Javascript:ocNode('35912-35858-18171', 0);" />Site3<br/>
         </div>
         
         <div id="divFolder_909-42746-96768" style="border-style:solid; border-width:1px; float: left; width: 100%; margin-left:0px;">
                <img id="fldImg_909-42746-96768" src="folderClosedPlus.jpg" alt="Site4" onClick="Javascript:ocNode('909-42746-96768', 0);" />
                <div style="float: left; "onClick="Javascript:loadTable('909-42746-96768');">Site4</div>
        </div>
</div>

Open in new window


The style is currently in the div just for debugging, and the "border-style:solid; border-width:1px;" is just there to show the div borders, it will be removed after debugging.

Any ideas what Im doing wrong?
tonelm54Asked:
Who is Participating?
 
DerZaubererConnect With a Mentor Commented:
Try adding style="float: left;" to the <img>s also.
0
 
jaxbrianCommented:
I believe it is because your width is set to 100% in the first div element. this will force the other div you have down to the next line even though it is still within the first div.
Try that and I will work on a possible other solution in a few moments if that doesn't work
0
 
jaxbrianCommented:
and yes you could always float the image left as well
0
 
garyknightCommented:
Put the surround the <img> tag with it's own <div> like so:

<div id="divTreeContent" style="width:300px; height:500px; float:left; text-align:left; font-size:12px;">
         <div id="divFolder_70758-67211-94570" style="border-style:solid; border-width:1px; float:left; width: 100%; margin-left:0px;">
                <div style="float:left;"><img id="fldImg_70758-67211-94570" src="folderClosedPlus.jpg" alt="Site1" onClick="Javascript:ocNode('70758-67211-94570',

0);" /></div>
                <div onClick="Javascript:loadTable('70758-67211-94570');">Site1</div>
         </div>
0
All Courses

From novice to tech pro — start learning today.