Jump to content

Equalizing content


nuzerog

Recommended Posts

Hi all,Just have a question. i am thinking for my website to include article blurbs in two columns. The problem is, depending on the length of the blurb, the two columns are of different heights. Is there a way to equalize the two utilizing code to change formating automatically. All the data being presented is drawn from an access database. Thanks All.

Link to comment
Share on other sites

If you have a character count or a byte count on the data you could then assume that these are the relative dimensions of the two data sections.I assume that you'd want 2 equal width collumns then you will need to find all of the paragraph breaks to insert more space - easy to say rather than do.Alternatively if the data is placed into 2 columns of unequal width then that will make the text look to occupy the same space.Data1 might by 120 bytes, Data2 say 150 bytesCollumn1 would be 120/(120+150) * 100 as a % Collumn2 would be 150/(120+150) * 100 as a % Would look very surreal if there was much bigger than say a 60:40 difference in size.

Link to comment
Share on other sites

if you are talking about making two div columns match each other height depending on which has the higher content, then there are two ways:cssmake the lower column give an impression that it extends to the bottom of the higher column.depend on your design of column layout. if you have two columns with white background, with the outer background blue, the difference in column height will obviously show, if you place outer div around two div columns and make its background white, it will take the height of the hightest column, which cover the lower columns remaining empty space.javascriptfind the height of both columns, change the height of lower colun to match higher column.javascript must be enabled though.edit:Another option would be to restrict long content blurbs to certain height , and show read more link in which, when clicked, will open page or pop window showing all blurb content.

Link to comment
Share on other sites

I like using table more than div.As an example below, the background table will cover both column depend which one is needed. If uou don't want table border, just set border="0".

<table width="100%" border="1" cellpadding="0" cellspacing="0" bgcolor="#00FFFF">  <tr>	<td width="50%" align="center" valign="top"><br />	  <table width="90%" border="1" cellspacing="0" cellpadding="0">	  <tr>		<td><p>Titile 1 </p>		  <p>Paragraph 1</p>		  <p>Paragraph 2</p>		  <p>Paragraph 3   </p></td>	  </tr>	</table>		<br />		<br />	</td>	<td width="50%" align="center" valign="top"><br />	  <table width="90%" border="1" cellspacing="0" cellpadding="0">	  <tr>		<td><p>Titile 1 </p>			<p>Paragraph 1</p>		  <p>Paragraph 2</p>		  <p>Paragraph 3 </p>		  <p>Paragraph 4</p>		  <p>Paragraph 5  </p></td>	  </tr>	</table>	<br /></td>  </tr></table>

No server side script or javascript needed. But base on my experiences of reading asp forum, a lot of people would suggest div than table because div is more fast loaded in browser. So, there is 4 choices given to you in this post and it is your choice to choose which one. :)

Link to comment
Share on other sites

You can emulate table behaviour to divs by applying the appropriate display values. The only downside is that it won't work in IE7 and below. If that's acceptable, I'd suggest you use that.

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...