[RESOLVED] Div float behavior inside of td's

Code:

---

        <table style="text-align:left;width:100%;">
                <colgroup>
                        <col style="width:49.5%; margin-right:0.5%;"/>
                        <col style="width:49.5%; margin-left:0.5%"/>
                </colgroup>
                <tr style="">
                          <td style="">
                                  <div style="">
                                        <div style="float:left;">
                                                <label style="" >Some of my text:</label>
                                        </div>
                                        <div style="float:right">
                                                <input name="sometext" value="" style="" size="40"/>
                                        </div>
                                </div>
                        </td>
                              <td style="">
                                <div style="">
                                        <div style="float:left;">
                                                <label style="" >More of my text:</label>
                                        </div>
                                        <div style="float:right;">
                                                <input name="moretext" value="" style="" size="40"/>
                                        </div>
                                </div>
                        </td>
                </tr>
        <table>

---

Thanks for the read.

This is the structure of my table (and yes, I do have to use a table here). Each td will contain a div that encapsulates various other elements. This "almost" behaves like I would like it to - except on resize. When the working area is shrunk and the input is ran into the label, I need the label to break on its whitespaces and leave the input on the same line as it.

I've tried as much as I know to make this happen and could really use some assistance.

Thanks.

You can't achieve what you want with the current approach. When you float elements you're taking them off of the regular page flow. This means that two floated elements aren't linked to each other in any way, so you can't force them to have direct effects on each other (not probably the best describing explanation, but I have a fuzzy head atm).

One problem you have here is that you're using excessive amount of divs. I believe you don't need any of them. I might even claim the table isn't really required, but I don't know what the final end result is. Seeing a sample page would be better than seeing just a part of the code (you know, lazy to make it myself, and even then I wouldn't know the rest of your page).

However, what you can do here is that you can remove all the divs so that label and input box are contained in the same level, then make the input box a block level element floated to the right; but not float the label. Thus label's width is automatically calculated. You can make the label a block level element to force it to conquer all the remaining horizontal space.

But you can still do all this without a table.

Code:

---

<fieldset><legend></legend>
    <p class="odd">
        <input id="some" name="sometext" value="" size="40" />
        <label for="some">Some of my text:</label>
    </p>
    <p class="even">
        <input id="more" name="moretext" value="" size="40" />
        <label for="more">More of my text:</label>
    </p>
</fieldset>

---

Code:

---

fieldset p label { display : block; }
fieldset p input { display : block; float : right; }
fieldset p { width : 49%; }
fieldset p.odd { float : left; }

---

Or something like that; I don't know if this is close to desired effect or not.

Thanks for the response. Unfortunately, it's not exactly what I was after. I over simplified my example and the more I explain it, the more abstract it'll get.

You are right though, I won't be able to accomplish what I want with div's here. Instead, I have to move to tables inside of tables and keep them as loose fitting as possible.

Appreciate the help. Thanks.