nuzerog Posted August 1, 2010 Share Posted August 1, 2010 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 More sharing options...
amj Posted August 9, 2010 Share Posted August 9, 2010 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 More sharing options...
dsonesuk Posted August 9, 2010 Share Posted August 9, 2010 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 More sharing options...
shaffiq_fiq88 Posted August 11, 2010 Share Posted August 11, 2010 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 More sharing options...
boen_robot Posted August 12, 2010 Share Posted August 12, 2010 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 More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.