Bumpy Bumpy - 2 months ago 13
CSS Question

Force text to wrap inside div with no width

Is it possible to have text wrap inside an inline-block div which only has a minimum width? (not width, nor max-width)

Here's what I mean:

<style type="text/css">

.container {
width:100%;
}

.field {
display: inline-block;
vertical-align: top;
min-width:25%;
}

label, input {
display: inline-block;
}

.alert {
display:block;
}

</style>


<div class="container">

<div class="field">
<label style="width:100px;">My Label</label>
<input style="width:200px;" type="text" />
<div class="alert">
This text should wrap at whatever width div.field actually is, and never push div.field out to the width of this text!
</div>
</div>

<div class="field">...another field...</div>
<div class="field">...another field...</div>
<div class="field">...another field...</div>
etc...

</div>


Notes:


  1. The
    label
    &
    input
    are
    inline-block
    so they stay on the same line, but
    div.alert
    is
    block
    so that it appears on a new line underneath the other contents of the field.

  2. div.field
    has only MIN-WIDTH (not width, or max-width) because when the user resizes the window (and the width of
    div.container
    ) the following should happen:

    a. If the field's fixed-width inline contents (in this case, LABEL+INPUT=300px) are LESS than 25% of the width of
    div.container
    , then
    div.field
    should be exactly 25% of the container width.

    b. If the field's fixed-width inline contents are MORE than 25% of the container, then they should push the field out to their combined width.



So, is there a way to get
div.alert
to wrap based on the width of the field according to the rules above?

Answer

Not without jQuery, something like:

$('.alert').width($('.alert').parents('.field').width());