Floating li left and the background image vanishes

[hargi]

Bit of a odd one I have started pulling in images from facebook as a li they display fine down the page however if i float them left the background colour of the containing div disappears ??

 <div id="page">
            <div class="content">
                <div id="pagetitle">Gallery</div>
                <div class="left">
                    <div id="mainContentgallery">
                         <?php

		//Set the page name or ID
		$FBid = '##############';
			//Get the contents of a Facebook page
		$FBpage = file_get_contents('https://graph.facebook.com/'.$FBid.'/photos');
		
		//Interpret data with JSON
		$photoData = json_decode($FBpage);
				
			foreach ( $photoData->data as $data )
		{
		echo '<li><img src="https://graph.facebook.com/'.$data->id.'/picture/"  />';
		echo '<br />'.$data->name.'</li>';
		}

	?> 
                    </div>
                   
                </div>
                <div class="right">
                    <div id="twitter"></div>
                    <!--<div id="advert"></div>-->
                </div>
                <div class="clear"></div>
            </div>
        </div>

CSS

/**gallery only**/
div.left div#mainContentgallery {
   font-family: 'Crafty Girls', cursive;
	font-weight: normal;
      font-size: 10px;
   width:650px;
   background-color:#FCF5D7;
   margin:20px;
   margin-right:0;
   
}

div.left div#mainContentgallery img {
 
 height:150px;
 width:150px;
}

div.left div#mainContentgallery li {
float:left; /** This loses the background colour from maincontentgallery div**/
padding:20px;
 padding-right:20px;
 list-style: none;
 width:150px;
}

any ideas?

 

[GravyMonster]

I think it's because when you float a block level element it becomes inline. Try adding display: inline-block; to the style for you LIs.

 

[hargi]

Spunkey you are a genius.

display:inline-block; worked and i dont have to float

 

[Tripnologist]

Bear in mind that neither IE6 or IE7 support inline-block, if you care about them that is.

A universal solution is to display block and float.

 

[hargi]

/**gallery only**/
div.left div#mainContentgallery {
   font-family: 'Crafty Girls', cursive;
	font-weight: normal;
      font-size: 12px;
   width:650px;
   background-color:#FCF5D7;
   margin:20px;
   margin-right:0;
   padding-bottom:20px;
}

div.left div#mainContentgallery img {
 
 height:295px;
 width:295px;
}

div.left div#mainContentgallery li {
 display: inline-block;
 padding:20px;
 padding-right:0px;
 list-style: none;
 width:295px;
 height:295px;
}

Trip where would i display block and float left? I have tried it in the li section and it breaks it again??

 

[fez]

Where is the ul tag to wrap the li elements in that code btw?

A useful trick when floating elements is to set overflow: auto; to the containing element (in this case a ul) and it will ensure that the containing element wraps the floated element. If you don't, you will have the floated elements within a containing div which is 0px high.

 

[Tripnologist]

Trip where would i display block and float left? I have tried it in the li section and it breaks it again??

I'll do you one better and show you how to make a proper nav. (provided you aren't using html5)

http://jsfiddle.net/De8zV/

edit: I should add that the css I've put on jsfiddle doesn't include any resets for browser defaults such as padding or margin.

 

[hargi]

The tutorial I was following didnt use ul .

Take it these should go outside the php code

 

[GravyMonster]

Call that a nav? This is a nav

 

[hargi]

Sorry im i missing something here?? im not making a nav

 

[fez]

Sorry im i missing something here?? im not making a nav

Haha, I suppose not. Either way, make sure you wrap li elements in either ul or ol tags. I would be a little worried about a tutorial that omits that.

 

[hargi]

Ahhh I think I see what you were trying to tell me

 

[Tripnologist]

Sorry im i missing something here?? im not making a nav

hahaha. Sorry mate. I must have been half asleep. I just assumed as you were using li's.

 

[hargi]

No worries got this now which looks to do the job

/**gallery only**/
div.left div#mainContentgallery {
   font-family: 'Crafty Girls', cursive;
	font-weight: normal;
      font-size: 12px;
   width:650px;
   background-color:#FCF5D7;
   margin:20px;
   margin-right:0;
   padding-bottom:20px;
}

div.left div#mainContentgallery ul{
list-style: none;
overflow: hidden;
}

div.left div#mainContentgallery li {
 display:block;
 float:left;
 padding:20px;
 padding-bottom:40px;
 padding-right:0px;
 
 width:295px;
 height:295px;
}

div.left div#mainContentgallery img {
 
 height:295px;
 width:295px;
}

 

[Chanc3]

You'll need to add display:inline to the li to make it work correctly in ie.7/8 iirc