Div v. table problem

[Jerry62704]

I'm replacing a table with div tags. The layout is 4 columns with text/result and text result.The problem I'm having is if the text size is set too large, the whole thing is thrown off layoutwise.I set up four divs with styles of left large, left small, right large and right small. The large areas are for the descriptions and the small ones for the data. It would look like this:first field line 001 $210 second field line 001 $100first field line 2 $3 second field line 2 $10This is OK at text size small. At larger sizes, it is switched to something like this:first field line second field line 001 $100001 first field line 2 $3 $10second field line 2The word wrap on the one line goes to the next line. But the text of the second line comes and then the results of each of them.The needed solution is how to have the word warp occur without moving everything else left to right.web page extract box and css code box:

      <div class="tblAlignLeftBig">            <bean:message key="fs.calc.result.childSupportDeduction"/></div>      <div class="tblAlignLeftSmall">         <bean:write name="FSCalcOutputForm" property="childSupportDeduction" /></div>      <div class="tblAlignRightSmall">         <c:if test="${FSCalcOutputForm.grossEligible}">           <bean:message key="fs.calc.result.passed"/>         </c:if>         <c:if test="${not FSCalcOutputForm.grossEligible}">           <bean:message key="fs.calc.result.failed"/>         </c:if>         </div>      <div class="tblAlignRightBig">         <bean:message key="fs.calc.result.grossTest"/></div>

	.tblAlignLeftBig {		text-align: left;		font-weight: normal;		width: 37%;  		float: left;  		margin-right: 8px;	}	.tblAlignLeftSmall {		text-align: right;		font-weight: normal;		width: 7%;		float: left; 	}	.tblAlignLeftSmallBold {		text-align: right;		font-weight: bold;		width: 7%;		float: left; 	}	.tblAlignRightBig {		text-align: left;		font-weight: normal;		width: 37%;  		float: right;  	}	.tblAlignRightSmall {		text-align: right;		font-weight: normal;		width: 7%;		float: right;		margin-right: 8px;	}	.tblAlignRightSmallBold {		text-align: right;		font-weight: bold;		width: 7%;		float: right; 		margin-right: 8px;	}

[Jerry62704]

I guess I stumped everyone with this. I thought it would be pretty hard. Looks like css and div will never replace tables.

[justsomeguy]

There are several situations where tables are obviously better then divs, this might be one of them.

[Jerry62704]

There are several situations where tables are obviously better then divs, this might be one of them.

Unfortunately, that would seem to be the case here. So much for the replace <table> with <div> stuff. Sigh.

[jlhaslip]

Well, speaking for myself, I found that the problem was not very clearly stated, the code was ... well, mysterious, at best..., there was an incomplete set of coding there (ie: no head tags), and no live link.All of the above clearly told me that in order to assist you, I needed to do too much work on my own. I don't mind helping people here, as my post count shows. Rarely do I ask for assistance here, most of my replies are to assist others who have taken the time to present the problem in such a manner that I am free to provide the help without having to do all the work.And what does this code do, exactly?

<<c:if test="${FSCalcOutputForm.grossEligible}"><bean:message key="fs.calc.result.passed"/></c:if><c:if test="${not FSCalcOutputForm.grossEligible}"><bean:message key="fs.calc.result.failed"/></c:if>

I haven't a clue, and I've read alot of html/css code in my time.Furthermore, your choice of class names tells me that you really aren't ready to drop tables yet...

tblAlignLeftSmallBold

Try this approach next time:

<div class="left small bold">etcetera...</div>CSS for the classes:.left { float:left; }.small { font-size: smaller; }.bold { font-weight: 700; }

*end rant here*I'd love to help... :)please present the problem so that I can be of some assistance. Thanks.

[Jerry62704]

Well, speaking for myself, I found that the problem was not very clearly stated, the code was ... well, mysterious, at best..., there was an incomplete set of coding there (ie: no head tags), and no live link.All of the above clearly told me that in order to assist you, I needed to do too much work on my own. I don't mind helping people here, as my post count shows. Rarely do I ask for assistance here, most of my replies are to assist others who have taken the time to present the problem in such a manner that I am free to provide the help without having to do all the work.And what does this code do, exactly?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!-- <body STYLE="size: 8.5in 11in"> --><!-- <html lang="en"> --><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head>	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />	<meta http-equiv="Pragma" content="no-cache" />	<meta http-equiv="Expires" content="-1" />	<title>Potential Foodstamp Program Eligibility</title>	<link rel="stylesheet" href="/FSCalc/theme/page.css"  media="all" />	<link rel="stylesheet" href="http://www.dhs.state.il.us/Sites/OneWeb/Site.css" type="text/css" />	<base href="http://localhost:8080/FSCalc/pages/FSCalcResultShell.jsp"></head><body bgcolor="white">	<div id="container">				      <div id="TopDiv">       <div id="TopLeftDiv">         <div id="HeaderDiv">            <a href="http://www.dhs.state.il.us">               <img src="/FSCalc/theme/images/DHSLogo.gif" title="DHS" alt="DHS"><br />               <span class="agency">Illinois Department of Human Services</span>               <br />               <span class="secretary">Carol L. Adams, Ph.D., Secretary</span></a>         </div>         <div id="TabBarDiv"></div>       </div>      <div id="TopRightDiv">         <div id="BannerDiv">            <img src="/FSCalc/theme/images/banner.jpg" title="Helping Families. Supporting Communities. Empowering Individuals." alt="Helping Families. Supporting Communities. Empowering Individuals.">         </div>      </div>	   </div>				<!--Content Area Begins Here--><!-- width="660" -->   <h1 class="textCenter">Potential Foodstamp Program Eligibility</h1>   <hr class="textCenter" /><!-- if allotment amount greater than 0 use one message otherwise use a different one -->   <div class="text">                    <b>Food Stamp</b> potential eligibility for household, estimated monthly benefit amount of          <b>$162</b>               </div>   <hr class="textCenter" />   <h2 class="text"><b>Calculation Details (Food Stamps)</b></h2>   <br /><!-- the right side is small/large so the numbers will go to the right     of the text, the reverse of what you would expect -->   <div class="text">      <div class="tblAlignLeftBig">         Family size</div>      <div class="tblAlignLeftSmallBold">         1</div>      <div class="tblAlignCenter"> </div>      <div class="tblAlignLeftBig">         Gross Income Limit for Unit Size</div>      <div class="tblAlignLeftSmall">         $1,107</div>      <div class="tblAlignLeftBig" style="top:22em">         Gross Income</div>      <div class="tblAlignLeftSmallBold" style="top:22em">         $0</div>      <div class="tblAlignCenter"> </div>      <div class="tblAlignLeftBig" style="top:22em">         Net Income Limit for Unit Size</div>      <div class="tblAlignLeftSmall" style="top:22em">         $851</div>      <div class="tblAlignLeftBig"> </div>      <div class="tblAlignLeftSmall"> </div>      <div class="tblAlignCenter"> </div>      <div class="tblAlignLeftBig">         Asset Limit for Unit Size</div>      <div class="tblAlignLeftSmall">         $2,000</div>      <div class="tblAlignLeftBig">         Deductions:</div>      <div class="tblAlignLeftSmall"> </div>      <div class="tblAlignCenter"> </div>      <div class="tblAlignLeftBig"> </div>      <div class="tblAlignLeftSmall"> </div>      <div class="tblAlignLeftBig">            <b>-</b> Earned Income Deduction</div>      <div class="tblAlignLeftSmall">         $0</div>      <div class="tblAlignCenter"> </div>      <div class="tblAlignLeftBig">            Your Gross Income Amount</div>      <div class="tblAlignLeftSmallBold">         $0</div>      <div class="tblAlignLeftBig">            <b>-</b> Standard Deduction</div>      <div class="tblAlignLeftSmall">         $134</div>      <div class="tblAlignCenter"> </div>      <div class="tblAlignLeftBig">            Your Net Income Amount</div>      <div class="tblAlignLeftSmallBold">         $0</div>      <div class="tblAlignLeftBig">            <b>-</b> Excess Shelter Deduction</div>      <div class="tblAlignLeftSmall">         $0</div>      <div class="tblAlignCenter"> </div>      <div class="tblAlignLeftBig">            Your Asset Amount</div>      <div class="tblAlignLeftSmallBold">         $0</div>      <div class="tblAlignLeftBig">            <b>-</b> Dependent Care Deduction</div>      <div class="tblAlignLeftSmall">         $0</div>      <div class="tblAlignCenter"> </div>      <div class="tblAlignLeftBig"> </div>      <div class="tblAlignLeftSmall"> </div>      <div class="tblAlignLeftBig">            <b>-</b> Child Support Deduction (court ordered)</div>      <div class="tblAlignLeftSmall">         $0</div>      <div class="tblAlignCenter"> </div>      <div class="tblAlignLeftBig">         Gross income test</div>      <div class="tblAlignLeftSmall">                    Passed         </div>      <div class="tblAlignLeftBig">            <b>-</b> Medical Deduction</div>      <div class="tblAlignLeftSmall">         $0</div>      <div class="tblAlignCenter"> </div>      <div class="tblAlignLeftBig">         Net income test</div>      <div class="tblAlignLeftSmall">                     Passed         </div>      <div class="tblAlignLeftBig"> </div>      <div class="tblAlignLeftSmall"> </div>      <div class="tblAlignCenter"> </div>      <div class="tblAlignLeftBig">         Asset test</div>      <div class="tblAlignLeftSmall">                     Passed                  </div>      <hr class="textCenter" />      <div class="tblAlignLeftBig">         Total Deductions</div>      <div class="tblAlignLeftSmall">         $134</div>      <div class="tblAlignCenter"> </div>      <div class="tblAlignLeftBig"> </div>      <div class="tblAlignLeftSmall"> </div>      <div class="tblAlignLeftBig">         Net Income</div>      <div class="tblAlignLeftSmall">         $0</div>      <div class="tblAlignCenter"> </div>      <div class="tblAlignLeftBig">         <span class="ql">Potential monthly benefit amount</span></div>      <div class="tblAlignLeftSmallBold">         $162</div>  </div>  <div class="textCenter">     <hr />     <input type="submit" value="Go Back To Food Stamp Eligibility Calculator" onclick="java script:history.back()" style="font-size: 8pt" class="buttonstyle"></div>   	    <div id="footer"></div>  			   <div id="disclaimer">      <h2 align="center"><font size="4">        Notice</font></h2>      In accordance with Federal Law, U. S. Department of Agriculture (USDA ), and U.S. Department of Health and Human Services (HHS) policy, the Department of Human Services is prohibited from discriminating on the basis of race, color, national origin, ######, age, disability, religion, or political belief.  To file a complaint of discrimination, contact either the Department of Human Services, USDA, or HHS. Contact information is listed below:      <ul><li>Department of Human Services, EEO/AA Office, 401 S. Clinton Street, 7th floor, Chicago, IL 60607 </li> <li>U.S. Department of Agriculture, Director, Office of Civil Rights, Room 326-W, Whitten Building, 1400 Independence Avenue, S.W., Washington D.C. 20250-9410 or call (202) 720-5964 (voice and TTY) </li> <li>U.S. Department of Health and Human Services, Director, Office for Civil Rights, Room 506-F, HHS Building, 200 Independence Avenue, S.W., Washington, D.C. 20201 or call (202) 619-0403 (voice) (202) 619-3257 (TTY)</li> </ul>      DHS, USDA, and HHS are equal opportunity providers and employers.   </div>		</div></body></html>

The problem is the table is divided into 4 cells. A text and resulting number or flag. The table allows any cell to expand with wordwrap adjusting everything else. Here is how it should look (at a small font so wordwarpping doesn't occur:

Calculation Details (Food Stamps)Family size1 Gross Income Limit for Unit Size$1,107Gross Income$0 Net Income Limit for Unit Size$851   Asset Limit for Unit Size$2,000Deductions:       - Earned Income Deduction$0    Your Gross Income Amount$0   - Standard Deduction$134    Your Net Income Amount$0   - Excess Shelter Deduction$0    Your Asset Amount$0   - Dependent Care Deduction$0      - Child Support Deduction (court ordered)$0 Gross income testPassed    - Medical Deduction$0 Net income testPassed    Asset testPassed 

(Hoping this results in what I see). Here is how it looks at a larger font (again hoping you see what I see:

Calculation Details (Food Stamps)Family size1 Gross Income Limit for Unit Size$1,107Gross Income$0 Net Income Limit for Unit Size$851   Asset Limit for Unit Size$2,000Deductions:       - Earned Income Deduction$0    Your Gross Income Amount$0   - Standard Deduction$134    Your Net Income Amount$0   - Excess Shelter Deduction$0    Your Asset Amount$0   - Dependent Care Deduction$0      - Child Support Deduction (court ordered)$0 Gross income testPassed    - Medical Deduction$0 Net income testPassed    Asset testPassed 

If this worked, you will see "Child support" on the right and not under "Your Asset Amount" on the left. The flow at this point is really screwed up.BTW, while I"ve spent many years doing this stuff (but not with struts or with this application or with conversions from tables), I hadn't see stacking of classes as you indicated before. Way cool. Can I assume it is last one home wins? Thus the last class will override any others if that condition should exist. And given I neither made up the CSS nor the original pages it is possible they do.But it doesn't affect the stated problem of getting things to work right.

[Jerry62704]

Sigh. I see the format was not presented. That is why I'll try to write what I see and hope you can see what I write (so to speak).Deductions:(other stuff appears here until I get to the one that wordwrapps) - Dependent Care Deduction $0 - Child Support Deductions (court ordered) $0 Gross inocme test Passed - Medical Deductions $0 Net income test PassedNow at a larger font size as a visually handicapped person might do:Deductions:(other stuff appears here with "ordered" wordwrapped and everything else thrown off kilter) - Dependent Care Deduction $0 - Child Support Deductions (court $0 Gross inocme test Passedordered) - Medical Deductions $0 Net income test PassedHTH

[jlhaslip]

Jerry,This stuff comes from a script?I see that you are spitting out a lot of empty divs. Why is that?What other approaches have you considered. One that comes to mind is to generate two columns and float them as css blocks instead of trying to control the page via empty div's. That might not be understood, but I'll see if I can come up with a demo after supper.Thanks for the last post. It helps considerably.

[Synook]

What S3L are you using? Looks unfamiliar to me.Tables will never be completely replaced by divs, but when you have a layout that has three elements stacked vertically then tables are sort of pointless.

[Jerry62704]

Soap Box:I'm sure if I expressed my opinion on Struts, it would violate forum rules. It certainly would be rude. That is also what causes the goofy blank lines in the source. I've done my own ASP and PHP since '95 and am not a fan of some program generating what I can already do in my sleep.The only think worth spit in it is the conditional test and that would be pretty easy to do by hand. But as many of us are in a position where it's not our choice, I have to build a bridge and get over it. Sigh.End Soap Box:Unless I can find a way to have div tags become as flexible as tables, I'll have to return to tables for this page. Any suggestions would be greatly appreciated. I"ve got it to work with the two column layout (defined as word wrap not causing the entire thing to go goofy), but the four columns are another kettle of fish.BTW, this forum doesn't use W3C accessibility standards. Any idea why? This size font is way too small for me to see easily. (Yes, I know I can change the output size, the one I can't see here in the edit box.)

[Jerry62704]

What S3L are you using? Looks unfamiliar to me.Tables will never be completely replaced by divs, but when you have a layout that has three elements stacked vertically then tables are sort of pointless.

We are using Struts as a development tool. But the problem is pure div. How to get a one of four to word warp without screwing up the other three.Could you elaborate on the "three elements stacked vertically" as being pointless in tables?

[Synook]

Could you elaborate on the "three elements stacked vertically" as being pointless in tables?

E.g. if you had a layout that looked like

+--------------------------------------------+| Banner									 |+--------------------------------------------+| Nav   Nav   Nav							|+--------------------------------------------+|											|| Content content content content content	|| content content content content content	|| content content content content content	|| content content content content content	|| content content content content content	||											|+--------------------------------------------+

Then in the old days you would use a table to make that

<table><tr><td colspan="3">Banner</td></tr><tr><td>Nav</td><td>Nav</td><td>Nav</td></tr><tr><td colspan="3">Content content content content content<br />content content content content content<br />content content content content content<br />content content content content content<br /></td></tr></table>

While obviously it would be more efficient just to use three divisions.

[Jerry62704]

Thanks for your explaination.I have found my answer by combining all the above things and coming up with one of my own. So that if anyone else is ever in this position, I'm going to give the solution I came up with. (Only works in IE - see bottom of post)1. Problem: Converting table columns (4) to divs for accessibility.2. Requirement: If a div is too wide (and it often is when viewed in Spanish), the positioning must be maintained3. Solution: Build a CSS to hold the wide columns (narrative of data) and narrow columns (data) and spacing between3.a I tried four float lefts and a dummy to serve to separate them. If the text were made larger (View | Text Size) the first div would word wrap, but the flow was destroyed so the various divs would appear out of order.3.b I tried two float left and two float right divs eliminating the need for one to hold the middle. This failed for when the CSS was turned off, the order of the right sides was wrong (data before narrative).3.c Went back to the five div layout of all float lefts. To hold the positions, I put the left/left and right/right pairs in a div of their own. This way, the next line wouldn't flow into gaps left by the word wrapping.Hopefully, everyone else won't miss this obvious solution now that it has been detailed by a sadder, but wiser man. :)Mea Cupla. It only works in IE. FF doesn't treat divs the same as IE I guess.