CSS Relative Height

[e1seix]

I have a code which displays the latest product additions to my database. Because of the nature of adding different products with various name lengths, the "window" on my website in which they're displayed needs to be big enough to accomodate, hence the following css code

 

#newWindow {
        margin:5px;
        padding:5px;
width:190px;
        height:300px;
        background-color:#ffffff;
}

html>body #newWindow {
        margin:5px;
        padding:5px;
width:180px;
        background-color:#ffffff;
}

 

this leaves at times a LOT of white space where the latest product additions are maybe only one-liners. However, it needs to be this way otherwise if i happen to add a lot of three-liners there isn't enough space to contain them and the visual of the website collapses.

 

is there a way to make the height relative to the following php code?

 

			echo '<div id="newWindow">';

echo '<div id="new">';

mysql_connect("xxx", "xxx", "xxx") or die(mysql_error());
mysql_select_db("xxx") or die(mysql_error());

  $startrow=0;
  $limit=5;

$fetchNew=mysql_query("SELECT * from admin WHERE inStock='yes' AND atTop='yes' AND subCat!='16' AND subCat!='17' ORDER BY timestamp DESC LIMIT $startrow, $limit")or
die(mysql_error());

while($row = mysql_fetch_array( $fetchNew )) {

$sku=$row[sku];

echo '<a href="/viewItem.php?sku='.$row[sku].'">'.$row[name].'</a><hr />';

}

echo '<a href="/newArrivals.php">More...</a></div>';

                        echo '</div>';

[haku]

CSS doesn't interact at all with PHP, only with the HTML that the PHP outputs. So output your php to the screen, view the source, copy the HTML and paste it here (with a little formatting to make it look nice).

 

I'm assuming the whitespace is vertical whitespace - why don't you just take the height off your CSS declaration? This will cause the next section to start where the last one ended.

[e1seix]

<div id="newTitle">Newest Arrivals:-</div>
<div id="newWindow">
<div id="new">
<a href="/viewItem.php?sku=2193">Dunhill London Shower Gel 200ml</a><hr />
<a href="/viewItem.php?sku=2192">Dunhill London Aftershave Balm 75ml</a><hr />
<a href="/viewItem.php?sku=2191">Dunhill London Aftershave 100ml</a><hr />
<a href="/viewItem.php?sku=1156">Herrera Aqua Eau de Toilette 50ml</a><hr />
<a href="/viewItem.php?sku=2189">Euphoria Men Intense Eau de Toilette 50ml</a><hr />
<a href="/newArrivals.php">More...</a>
</div>
</div>

 

here's the html code. with the "new" tag, surely it will just wrap around what's there... HOWEVER, the "new window" tag surrounds the "new" tag in order to create the border and the way the website is constructed with <div> tags.

[haku]

I have no idea at all what you were trying to say there.

[TheFilmGod]

height: auto; or add a declaration of "overflow: visible;"

 

By specifying a height to the div, restricts the browser to making the div THAT EXACT height instead of an automatically content generated height.

 

Hope that helps!