...

View Full Version : float not working!!



jcdevelopment
01-08-2008, 04: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">
<!-- ONE <UL> for each "picture deposit" -->
<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..

Excavator
01-08-2008, 05:42 PM
Hello jcdevelopment,
Without piecing all that code back together... I'd say it's your use of clear:left; here:


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

If you think about it, a group of pictures is not really a list.

jcdevelopment
01-08-2008, 05:44 PM
Well, i got rid of it, that was originally an attemp to fix, but i know i didnt have it before. Alas it didnt work but i appreciate you looking at it for me.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum