Streching to right end

HTML & CSS
1

I have a webPage at http://dot.kr/x-test/layOut2/dynamicSub2.php.

Since the button sub is dynamic, the text in the button “sub” can be “sub123456789012345678901234567890”.
Then, the button “logIn” is dropped at http://dot.kr/x-test/layOut2/dynamicSub3.php.

In order NOT to drop the button “logIn”, I change the both button “sub” and “logIn” from DIV to SPAN at http://dot.kr/x-test/layOut2/dynamicSub4.php. But the button logIn is still droppped.

How can I make the button “logIn” is not dropped when the text of the button “sub” is very long?

(I want to make it, the button “sub123456789012345678901234567890” is automatically dropped just before the button “logIn” by the code “word-break:break-all;border-collapse:collapse”.)

2

Hi,
If you want the left item to drop first them you will need to make the right float first in the html.

e.g.


<div>
<div class="floatRight fRm5 bdColorGray solid bdr2 b-r15 pdg5">logIn</div>    
<div class="floatLeft fRm5 bdColorGray solid bdr2 b-r15 pdg5">sub123456789012345678901234567890</div>
  </div>

However the whole line will drop below “login” and not just the necessary characters. If you want the text to wrap then remove the float:left and apply overflow:hidden instead.


<div>
<div class="floatRight fRm5 bdColorGray solid bdr2 b-r15 pdg5">logIn</div>    
<div [B]style="overflow:hidden"[/B] class="fRm5 bdColorGray solid bdr2 b-r15 pdg5">sub123456789012345678901234567890</div>
    
  </div>

(Inline style for example only)

Don’t overdo the multiple non-semantic class names otherwise you may end up with spaghetti code resembling font tags and inline styling.

e.g.

This:


<div class="fRm5 bdColorGray solid bdr2 b-r15 pdg5">Some text</div>

Is looking a lot like this: :slight_smile:


<div><font size="2" face="verdana" color="green" >Some text</font> </div>
3

Hello, The result of the code above is good at http://dot.kr/x-test/layOut2/dynamicSub7.php.

But I found it has a problem.
Since the button sub is dynamic, the text in the button “sub123456789012345678901234567890” can be “sub12345”.
The button “sub123” is unexpectedly stretched to the right end at http://dot.kr/x-test/layOut2/dynamicSub8.php.

I like to remove the blank part of the button “sub123”.

4

Hi,

You will need to add a wraper div with the overflow:hidden and leave the child as float:left.

e.g.


<div>
    <div class="floatRight fRm5 bdColorGray solid bdr2 b-r15 pdg5">logIn</div>
    <div style="overflow:hidden;zoom:1.0">
      <div class="floatLeft fRm5 bdColorGray solid bdr2 b-r15 pdg5">sub12345</div>
   </div>
  </div>