fluid boxes in FireFox

**geoff-lanz** · Nov 11, 2011 04:30

Hi, Trying to make a fluid photo gallery in a left-floated container,all seems well in all but firefox,any help.
thanks.
Geoff
http://www.jakebanks.com/fluidbox/#

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>fluidGallery</title>
<style type="text/css">


#wrapper {
border:1px solid #000;
width:55%;
float:left;
}

.inlineBox {
background-color:#FF0000;
margin:0px;
display: inline-block;
}


div.img
   {
   margin:2px 2px 10px 10px;
   padding:0 2px 0 2px;
   border: solid 2px #000;
   -moz-border-radius: 5px;
   -webkit-border-radius: 5px;
    border-radius: 5px;
   height:auto;
   width:auto;
   float:left;
   text-align:center;
   }
   
 div.img img
   {
   display:inline;
   margin:3px auto 0 auto;
   border:2px solid  #999;
   -moz-border-radius: 5px;
   -webkit-border-radius: 5px;
    border-radius: 5px;
   }
 
 div.desc
   {
   text-align:center;
   font-weight:normal;
   width:120px;
   margin:2px;
   }
  
 
</style>

</head>

<body>

<div id="wrapper">
  
     <div class="box"><div class="img">
           <a target="_blank" href="#"><img src="house1.jpeg"  width="120" height="120"/> </a>
           <div class="desc">Text Text Text Text Text TextText Text</div>
       </div><!----end img---->
       </div><!----end box---->
 <div class="box"><div class="img">
           <a target="_blank" href="#"><img src="house1.jpeg"  width="120" height="120"/> </a>
           <div class="desc">Text Text Text Text Text TextText Text</div>
       </div><!----end img---->
       </div><!----end box---->
	   
	   <div class="box"><div class="img">
           <a target="_blank" href="#"><img src="house1.jpeg"  width="120" height="120"/> </a>
           <div class="desc">Text Text Text Text Text TextText Text</div>
       </div><!----end img---->
       </div><!----end box---->
	   
	   <div class="box"><div class="img">
           <a target="_blank" href="#"><img src="house1.jpeg"  width="120" height="120"/> </a>
           <div class="desc">Text Text Text Text Text TextText Text</div>
       </div><!----end img---->
       </div><!----end box---->
	   
	   <div class="box"><div class="img">
           <a target="_blank" href="#"><img src="house1.jpeg"  width="120" height="120"/></a>
           <div class="desc">Text Text Text Text Text TextText Text</div>
       </div><!----end img---->
       </div><!----end box---->
	   
	   <div class="box"><div class="img">
           <a target="_blank" href="#"><img src="house1.jpeg"  width="120" height="120"/> </a>
           <div class="desc">Text Text Text Text Text TextText Text</div>
       </div><!----end img---->
       </div><!----end box---->
	   
	   <div class="box"><div class="img">
           <a target="_blank" href="#"><img src="house1.jpeg"  width="120" height="120"/> </a>
           <div class="desc">Text Text Text Text Text TextText Text</div>
       </div><!----end img---->
       </div><!----end box---->
	   
	   <div class="box"><div class="img">
           <a target="_blank" href="#"><img src="house1.jpeg"  width="120" height="120"/> </a>
           <div class="desc">Text Text Text Text Text TextText Text</div>
       </div><!----end img---->
       </div><!----end box---->
	   
	   <div class="box"><div class="img">
           <a target="_blank" href="#"><img src="house1.jpeg"  width="120" height="120"/> </a>
           <div class="desc">Text Text Text Text Text TextText Text</div>
       </div><!----end img---->
       </div><!----end box---->
 
 
 
 </div><!----end wrapper---->
 
		
	

</body>
</html>

**ralph.m** · Nov 11, 2011 04:48

Rather than float the image, you are better off doing that to the boxes. But then, rather than floating the boxes, this works better:

Code:

.box {display: inline-block; vertical-align: top;}

Try adding that to your style sheet and see what you think.

For older versions of IE, you'll need

Code:

.box {display: inline}

**geoff-lanz** · Nov 11, 2011 06:43

Many thanks ,but embarrassingly i used the wrong class, .box should be .inlineBox doh!!!!!.but now is it poss to center the inlineboxes in the floated container .
thanks again.

http://www.jakebanks.com/fluidbox/index+1.html

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>fluidGallery</title>
<style type="text/css">


#wrapper {
border:1px solid #000;
width:55%;
float:left;
}

.inlineBox {
background-color:#FF0000;
margin:0 0 2px 0;
display: inline-block;
vertical-align: top;
}


div.img
   {
   margin:2px 2px 2px 2px;
   padding:0 2px 0 2px;
   border: solid 2px #000;
   -moz-border-radius: 5px;
   -webkit-border-radius: 5px;
    border-radius: 5px;
   height:auto;
   width:auto;
   float:left;
   text-align:center;
   }
   
 div.img img
   {
   display:inline;
   margin:3px auto 0 auto;
   border:2px solid  #999;
   -moz-border-radius: 5px;
   -webkit-border-radius: 5px;
    border-radius: 5px;
   }
 
 div.desc
   {
   text-align:center;
   font-weight:normal;
   width:120px;
   margin:2px;
   }
  
 
</style>

</head>

<body>

<div id="wrapper">
  
     <div class="inlineBox"><div class="img">
           <a target="_blank" href="#"><img src="house1.jpeg"  width="120" height="120"/> </a>
           <div class="desc">Text Text Text Text Text TextText Text</div>
       </div><!----end img---->
       </div><!----end inlineBox---->
	   
	   <div class="inlineBox"><div class="img">
           <a target="_blank" href="#"><img src="house1.jpeg"  width="120" height="120"/> </a>
           <div class="desc">Text Text Text Text Text TextText Text</div>
       </div><!----end img---->
       </div><!----end inlineBox---->
	   
	   <div class="inlineBox"><div class="img">
           <a target="_blank" href="#"><img src="house1.jpeg"  width="120" height="120"/> </a>
           <div class="desc">Text Text Text Text Text TextText Text</div>
       </div><!----end img---->
       </div><!----end inlineBox---->
	   
	   <div class="inlineBox"><div class="img">
           <a target="_blank" href="#"><img src="house1.jpeg"  width="120" height="120"/> </a>
           <div class="desc">Text Text Text Text Text TextText Text</div>
       </div><!----end img---->
       </div><!----end inlineBox---->
	   
	   <div class="inlineBox"><div class="img">
           <a target="_blank" href="#"><img src="house1.jpeg"  width="120" height="120"/> </a>
           <div class="desc">Text Text Text Text Text TextText Text</div>
       </div><!----end img---->
       </div><!----end inlineBox---->
	   
	   <div class="inlineBox"><div class="img">
           <a target="_blank" href="#"><img src="house1.jpeg"  width="120" height="120"/> </a>
           <div class="desc">Text Text Text Text Text TextText Text</div>
       </div><!----end img---->
       </div><!----end inlineBox---->
	   
	   
	   <div class="inlineBox"><div class="img">
           <a target="_blank" href="#"><img src="house1.jpeg"  width="120" height="120"/> </a>
           <div class="desc">Text Text Text Text Text TextText Text</div>
       </div><!----end img---->
       </div><!----end inlineBox ---->
	   
	   
	   <div class="inlineBox"><div class="img">
           <a target="_blank" href="#"><img src="house1.jpeg"  width="120" height="120"/> </a>
           <div class="desc">Text Text Text Text Text TextText Text</div>
       </div><!----end img---->
       </div><!----end inlineBox---->
	   
	   <div class="inlineBox"><div class="img">
           <a target="_blank" href="#"><img src="house1.jpeg"  width="120" height="120"/> </a>
           <div class="desc">Text Text Text Text Text TextText Text</div>
       </div><!----end img---->
       </div><!----end inlineBox---->
	   
	   
	   <div class="inlineBox"><div class="img">
           <a target="_blank" href="#"><img src="house1.jpeg"  width="120" height="120"/> </a>
           <div class="desc">Text Text Text Text Text TextText Text</div>
       </div><!----end img---->
       </div><!----end inlineBox---->
	   
	   
	   
	   <div class="inlineBox"><div class="img">
           <a target="_blank" href="#"><img src="house1.jpeg"  width="120" height="120"/> </a>
           <div class="desc">Text Text Text Text Text TextText Text</div>
       </div><!----end img---->
       </div><!----end inlineBox---->
 
 
 
 
 </div><!----end wrapper---->
 
		
	

</body>
</html>

**ralph.m** · Nov 11, 2011 16:15

Originally Posted by geoff-lanz

is it poss to center the inlineboxes in the floated container

You could try

Code:

#wrapper {
  border: 1px solid #000000;
  float: left;
  width: 55%;
  text-align: center;
}

User Tag List

Thread: fluid boxes in FireFox

Thread Tools

Display

fluid boxes in FireFox

Bookmarks

Bookmarks

Posting Permissions