1 reply [Last post]
kiwis
kiwis's picture
Offline
Enthusiast
Last seen: 1 week 1 day ago
Timezone: GMT+12
Joined: 2009-03-07
Posts: 66
Points: 104

I have the following code, my catalog div's will be populated by PHP code and the number will vary depending on the number of SQL results.

I want it's height to change, currently it doesn't

<div class="header-container">
	<div class="header-logo">
    	<img src="img/logo-md.png" alt="Suite for the Soul">
	</div>
 
</div>
 
<div class="header-menu">
    <div class="menu-container">
        <ul class="main-menu">
            <li class="menu-item">Home</li>
            <li class="menu-item">Catalog</li>
            <li class="menu-item">Services</li>
            <li class="menu-item">Gallery</li>
            <li class="menu-item">Blog</li>
            <li class="menu-item">-</li>
            <li class="menu-item">Contact Us</li>
        </ul>
	</div>
</div>
<div style="float:none;"></div>
 
<div class="body-background">
	<div class="body-container"> 
	    <div class="cataglog"></div>
	    <div class="cataglog"></div>
	    <div class="cataglog"></div>
	    <div class="cataglog"></div>
	    <div class="cataglog"></div>  
	    <div class="cataglog"></div>
	    <div class="cataglog"></div>
	    <div class="cataglog"></div>
	    <div class="cataglog"></div>
	    <div class="cataglog"></div>                                        
	</div>
 
	<div style="float:none;"></div>  
 
</div>
 
 
<div class="footer-container">
	<div class="footer">
        <ul id="footer-menu">
            <li>About Me</li>
            <li>Blog</li>
            <li>Facebook</li>
            <li>Contact Us</li>
        </ul>
    </div>
 
</div>

@charset "utf-8";
/* CSS Document */
 
 
body{
	margin:0px;
	padding:0px;
	background-color:#FFFF64;
}
 
.header-container{
	background-image:url(img/background.jpg);
	background-repeat:repeat-x;
	height: 250px;
	width:100%;
}
 
/*.header-logo{
	width:636px;
	height:200px;
	margin: 0 auto;
	padding-top:25px;
 
}*/
 
.header-logo{
	width:477px;
	height:150px;
	margin: 0 auto;
	padding-top:50px;
 
}
 
.header-menu{
	background-color:#333;
	height:45px;
}
 
.menu-container{
	width:900px;
	margin: 0 auto;	
}
 
.main-menu{
	margin:0px;
	padding:0px;
	padding-top:7px;
	padding-left:10px;
}
 
.menu-item{
	list-style:none;
	float:left;
	text-align:center;
	color:#FFF;
	font-size:24px;
	font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
	text-shadow:#000000 1px 1px;
	padding-right:15px;
 
}
 
#main-menu li:hover{
	color:#039;
}
 
.body-background{
	min-height:700px;
}
 
 
.body-container{
	width:900px;
	margin: 0 auto;
}
 
.cataglog{
	float:left;
	border: solid 2px #FFF;
	height: 200px;
	width:276px;
	background-color:#666666;
	margin:10px;
 
}
 
.cataglog1{
	float:left;
	border: solid 2px #FFF;
	height: 200px;
	width:276px;
	background-color:#666666;
	margin:10px;
 
}
 
.cataglog2{
	float:left;
	border: solid 2px #FFF;
	height: 200px;
	width:276px;
	background-color:#666666;
	margin:10px;
 
}
 
.cataglog3{
	float:left;
	border: solid 2px #FFF;
	height: 200px;
	width:276px;
	background-color:#666666;
	margin:10px;
 
}
 
 
.footer-container{
	width:100%;
}
 
.footer{
	border-top: solid 2px #333;	
	width:900px;
	margin: 0 auto;
	padding-bottom:30px;
}
 
#footer-menu{
	list-style:none;
	width:900px;
	margin: 0 auto;
	padding-top:7px
}
 
#footer-menu li{
	float:left;
	text-align:center;
	color:#000;
	font-size:14px;
	padding-right:15px;
	font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
	text-shadow:#fff 1px 1px;
}
 

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 21 hours 3 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9761
Points: 3843

?

I'm not at all sure of what it is you want to do. See my demo page, inline-block gallery. Let your query fill the div elements, and set them to {display: inline-block;}.

At least that's what I'm guessing you want.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.