I want to have two divs inside of a container div, each set

position:relative;

and the first one set

float:left;

Both of the divs contain a small amount of text (maybe 30 characters total).

I want the width of the text to determine the width of the two divs. so that if someone changes text size the text doesn’t overflow the divs. I am using these divs as tabs on a form where you change the type of form by clicking on the tab. Since they are tabs I don’t want to just make them big.

Any help would be appreciated.

thanks!
Anne Johnson

Are you controlling the text size that can be selected, or will it be by a browser zoom, text size functions?

If you are controlling the offered text size then you could predetermine the display widths of your tabs. If you are using php, then based on what text size is selected you could change the class of the tabs. If via javascript then you could attach an event to the size selection that would manipulate the tabs based on what was selected.

If you are trying to maintain styling within an accessible layout, where the users browsers settings, choices determine font size then you would need to style your text & tabs using em so that they would scale together. An example of this: http://www.htmldog.com/articles/suckerfish/dropdowns/example/

q2 - now those divs have the width of one column (25% of screen space) but I need them to be as wide as the text that they contain is. Their right border is supposed to be right after the last letter, not at the end of the column. For example if “divname” has a word “hi” in it, I want that div to have the width of two letters, not 25% of screen space. Yea I know that my css example has “divname width=100%”, but I just have no idea what to write instead, width=100% is definately not what I need.

Search engine optimization

If you have set your text size explicitly then:
1: If using php output the div & text including inline style of the div width. eg. <div style=”<?=strlen($divText)*($fontSize+-$testedVal);?>px”><?=$divText;?></div>
2: Using javascript would be similar but modifying the DOM element after it has been rendered. div.style.width=div.text.length*(fontSize+-testedVal)

I already referred this to my friend.

Regards

joseph23