It appears you have not yet registered with DEVPPL. To register please click here... (it's fast, easy and free!)

Forum

Log In Sponsors
Board index Programming CSS Forum

Equal space inside the DIV tag

Equal space inside the DIV tag

Postby explorer07 on Sun Aug 12, 2007 4:32 pm

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
explorer07
 
Posts: 23
Joined: Thu Aug 09, 2007 12:00 am

Postby knifeinback on Mon Aug 13, 2007 6:07 am

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
User avatar
knifeinback
100+ Club
 
Posts: 136
Joined: Fri Jul 27, 2007 10:41 am
Location: 4170: Brisbane

Postby explorer07 on Mon Aug 13, 2007 9:13 am

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
explorer07
 
Posts: 23
Joined: Thu Aug 09, 2007 12:00 am

Postby hgmmy06 on Thu Aug 23, 2007 4:41 am

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
hgmmy06
 
Posts: 34
Joined: Thu Mar 15, 2007 9:14 pm

Postby explorer07 on Thu Aug 23, 2007 9:26 am

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.
explorer07
 
Posts: 23
Joined: Thu Aug 09, 2007 12:00 am

Postby hgmmy06 on Thu Aug 23, 2007 2:43 pm

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
hgmmy06
 
Posts: 34
Joined: Thu Mar 15, 2007 9:14 pm

Postby explorer07 on Thu Aug 23, 2007 4:15 pm

Yes but the height does not vary. Why is that?
explorer07
 
Posts: 23
Joined: Thu Aug 09, 2007 12:00 am

Postby hgmmy06 on Thu Aug 23, 2007 6:38 pm

Could we either have a link or the coding by chance?
hgmmy06
 
Posts: 34
Joined: Thu Mar 15, 2007 9:14 pm

Postby explorer07 on Thu Aug 23, 2007 10:22 pm

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;
}
explorer07
 
Posts: 23
Joined: Thu Aug 09, 2007 12:00 am


Who is online

Users browsing this forum: No registered users and 1 guest