float not working!! [Archive]

jcdevelopment

01-08-2008, 03:47 PM

I have a small problem with lists as far as them being floated left. I have a div wrapping two other divs. In the main div i have all of the LI's floating left to create a horizontal list. The top div works, then the bottom one doesnt. Here is my code hopefully someone can see something i cant.....

css for main div

#dragDropContainer li,#dragContent li,li#indicateDestination{ /* Movable items, i.e. <LI> */
list-style-type:none;
width:86px;
height:63px;
background-color:#EEE;
border:1px solid #000;
padding:1px;
margin-bottom:2px;
cursor:move;
font-size:0.9em;
float:left;
margin-left:3px;
}

the other two:

div#listOfItems{ /* top column "Page Pictures" */

padding-left:10px;
padding-right:10px;
height:150px;/*This controls the height of the actual visual box*/
/* CSS HACK */
width: 970px; /* IE 5.x */
width/* */:/**/970px; /* Other browsers */
width: /**/970px;

}

#listOfItems ul{ /* Left(Sources) column <ul> */
height:500px; /*I really dont know what the hell this one does,
really not needed, it doesnt affect the UL*/
}

div#listOfItems div{
border:1px solid #999;
}

div#listOfItems div ul{ /* top column <ul> */
height:100px;
}

#listOfItems div p{ /* Heading above top column */
margin:0px;
font-weight:bold;
padding-left:12px;
background-color:#317082;
color:#FFF;
margin-bottom:5px;
}

/* END top COLUMN CSS */

/* Start main container CSS */

div#mainContainer{ /* bottom column DIV */
width:975px;
height:500px;
margin-left:10px;
}
#mainContainer div{ /* Parent <div> of small boxes */
height:120px;
margin-right:10px;
margin-bottom:10px;
margin-top:0px;
border:1px solid #999;
float:left;
/* CSS HACK */
width: 970px; /* IE 5.x */
width/* */:/**/970px; /* Other browsers */
width: /**/970px;
}

#mainContainer div ul{
padding:1px;
}

#mainContainer div p{ /* Heading above small boxes */
margin:0px;
padding:0px;
padding-left:12px;
font-weight:bold;
background-color:#317082;
color:#FFF;
margin-bottom:5px;
}

#mainContainer ul{ /* Small box in bottom column ,i.e <ul> */
width:152px;
height:80px;
border:0px;
margin-bottom:0px;
overflow:hidden;
float:left;
}

#mainContainer div ul li {
float:left;
clear:left;
}

I hope i havnt confused you yet

now the HTML:

<body>

<div id="dragDropContainer">
<div id="listOfItems">
<div>
<p>Page Pictures</p>
<ul id="Page_pictures_row1" >
<li id="pic1"><img src="gfx/drag_column_picture/pic1.jpg"></li>
<li id="pic2"><img src="gfx/drag_column_picture/pic2.jpg"></li>
<li id="pic3"><img src="gfx/drag_column_picture/Pic3.jpg"></li>
<li id="pic4"><img src="gfx/drag_column_picture/Pic4.jpg"></li>
<li id="pic5"><img src="gfx/drag_column_picture/Pic5.jpg"></li>
<li id="pic6"><img src="gfx/drag_column_picture/Pic6.jpg"></li>
<li id="pic7"><img src="gfx/drag_column_picture/Pic7.jpg"></li>
<li id="pic8"><img src="gfx/drag_column_picture/Pic8.jpg"></li>
<li id="pic9"><img src="gfx/drag_column_picture/Pic9.jpg"></li>
<li id="pic10"><img src="gfx/drag_column_picture/Pic10.jpg"></li>
</ul>
</div>
</div>
<div id="mainContainer">

<div>
<p>New Uploads</p>
<ul id="New_Uploads_not_stored">
<li id="pic11"><img src="gfx/drag_column_picture/Pic11.jpg"></li>
<li id="pic12"><img src="gfx/drag_column_picture/pic12.jpg"></li>
<li id="pic13"><img src="gfx/drag_column_picture/pic13.jpg"></li>

</ul>
</div>

</div>
</div>
</body>

Ok so the div MainContainer, the pictures will not lay horizontally they are layed out going up and down.

Does anyone have a solution??

Thanks for any though, let me know of any other things you might need..