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?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

DerZaubererCommented:
Try adding style="float: left;" to the <img>s also.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
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
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.