Equal space inside the DIV tag

[explorer07]

Hi

Does anyone know how I can assign equal spaces to 4 or 5 records being read from a databse inside a single DIV tag area?

Thanks

Explorer

[knifeinback]

my idea would be to use a full screen div (100% x 100%) and then use frames inside that, or not bother using the div and just use frames.

----

alternativly, split the databases into as many different sections as it takes (if you don't have them like that already.
then make as many divs as it takes with according percentage values for height, width etc.

ie:

Code: Select all

div1{
height: 100%;
width: 50%;
left: 0%;
top: 0%;
}

div2{
height: 100%;
width: 50%;
left: 50%;
top: 0%;
}


kinda thing

[explorer07]

Thanks knifeback,

Both of the above I had alredy thought of. In fact I could also use a table inside the single DIV tag to achieve that. That is probably better. However, I thought may be there is a way to lmit the space within the Single DIV tag as I am new to CSS.

It looks now that I will have to use mupltiple DIVs for each record or a table inside the single DIV tag.

Regards

Explorer

[hgmmy06]

You can specify a minimum or maximum height/width with the css tags

min-height:
max-height:
min-width:
max-width:

You can use a % px cm...ect

[explorer07]

the width is fixed - so no need to worry about that. But height is not.

I get strange behaviour with height. If I use max-height, the text seems to flow underneath some of the floated image to the right.

If I use just height none of texts in any of the records flow underneath the image this is a better result.

However, the height does not alter weather I use 10PX, or 20PX etc. May be the floated image on the right is haveing some impact.

I got the result I wanted more or less but it is not clear how it is working.

[hgmmy06]

Here's another tag that might help.


overflow:

Possible Values, Value Description
visible: The default value. Default. The content is not clipped. It renders outside the element
hidden: The content is clipped, but the browser does not display a scroll-bar to see the rest of the content
scroll: The content is clipped, but the browser displays a scroll-bar to see the rest of the content
auto: If the content is clipped, the browser should display a scroll-bar to see the rest of the content

[explorer07]

Yes but the height does not vary. Why is that?

[hgmmy06]

Could we either have a link or the coding by chance?

[explorer07]

Here is the code:

<div class="boxanalysis">
<div align="center" class="big">Latest Analysis
</div>
<hr><br>
<?php do { ?>
<div class="image_float">
<img src="<?php echo $row_RsHeadlines['picture']; ?>"
height="120" width="120"/>
</div>
<div class="title">
<a href="article.php?recordID=<?php echo $row_RsHeadlines['articleid']; ?>">
<?php echo $row_RsHeadlines['title']; ?> </a>
</div>
<br>
<div style="height:20px">
<?php echo $row_RsHeadlines['description']; ?>
<a href="article.php?recordID=<?php echo $row_RsHeadlines['articleid']; ?>">
More... </a>
</div>
<br>
<?php $maxRows_RSHeadlines=$maxRows_RSHeadlines-1;
$row_RsHeadlines = mysql_fetch_assoc($RsHeadlines); ?>

<?php } while ($maxRows_RSHeadlines>0); ?>

<p align="center"> <a href="analysis.php" class="archive"> Archive >> </a> </p>
</div> <!--end of boxanalysis -->

Here is the CSS code - .boxanalysis {
font-family: Georgia, "Times New Roman", Times, serif;
border-width:thin;
padding:0.5em 1em 1em 1em;
border-style: solid;
border-color: #000000;
font-size: 1.2em;
text-align: justify;
font-stretch:expanded;
background-color: #CAFBD2;
visibility: visible;
margin-top: 5px;
}


.image_float {
float:right;
margin:0 0 0 0.5em;
}