3

How can I style a DIV with text in it so that if takes the minimum length between a min-width and a max-width?

For example, if I have the min and max set at 200 and 400px, I want:

  • a div with text shorter than 200px to be 200px wide
  • a div with text between 200px and 400px to have the width of the text
  • a div with text longer than 400px to be wrapped

This jsFiddle I made explains it better: http://jsfiddle.net/LHFSn/ ...it sounds simple and straight forward but I just can't seem to figure it out.

And no, the obvious:

min-width: 200px;
max-width: 400px;

...doesn't give me what I want at all.

3 Answers 3

2

Setting

display: inline-block

will allow you to achieve the desired result width-wise, but will also mean the elements will be displayed inline, that is, next to one another if they fit.
You can avoid this by wrapping your elements in block-style containers. While this sounds far from ideal it's the first idea off the top of my head that works.

Expanding on your further question, you can float these elements, wrap them in a container that's also displayed inline and then block it using Rúnar Berg's suggestion of empty blocks.

See sample jsFiddle
Clearfix reference

HTML:

ACTUAL:
<div></div>
<div class="wrapper cf">
<div class="flex-text">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
</div>
<div class="flex-text">
    Lorem ipsum dolor sit amet.
</div>
<div class="flex-text">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
</div>
</div>
<div></div>
Further content

CSS:

.flex-text {
    min-width: 200px;
    max-width: 400px;
    display: inline-block;
    background: #def;
    float: left;
    clear: both;
}

/* this is just to show a 200px ruler for reference */
.flex-text:after {
    content: "";
    display: block;
    width: 200px;
    border-top: 4px solid black;
    margin: 0 0 20px 0;
}

.wrapper {
    display: inline-block;
    background: lightblue;
}

.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}
.cf:after {
    clear: both;
}
.cf {
    *zoom: 1;
}
3
  • but it doesn't solve the real problem. now I need to get the outer div to have the width of the inner ones, and I can't also make them inline-blocks. see: jsfiddle.net/fXxV3/2 (the pink outer divs are full width now). To be more explicit, I also need the flex-text divs stacked inside a container AND I need the width of the container to be the width of the widest inner div...
    – NeuronQ
    Apr 24, 2014 at 18:16
  • I've expanded on the answer, accounting for your needs and using Rúnar Berg's suggestion.
    – Etheryte
    Apr 24, 2014 at 19:44
  • Kudos, both yours, and a variation on Runar Berg's solution solve my problem
    – NeuronQ
    Apr 24, 2014 at 21:15
2

You can try to set the container display to table and the inner display to table-cell. It might get you into more trouble though.

http://jsfiddle.net/fXxV3/3/

4
  • Or you can use Nits solution except have empty divs in between your inline-block displayed elements jsfiddle.net/fXxV3/4 Apr 24, 2014 at 18:38
  • A variation on this one seems to work for me, I tried this and it fits my purposes, I can even absolutely position the tables afterwards: jsfiddle.net/w7mmS/1
    – NeuronQ
    Apr 24, 2014 at 21:09
  • Thanks! I voted Nit's solution as the answer because it will probably be more useful for other people searching for a solution to this, as the table solution may indeed cause problems to others. But you have my upvote :)
    – NeuronQ
    Apr 25, 2014 at 9:09
  • I agree, I really dislike the table display styling for anything except thinks that are laid out in a tabular manner. But sometimes you're just stuck with it while column and flexboxes are still half implemented. Apr 25, 2014 at 14:17
0

Problem:

Your .flex-text is a non-floated block element so by default it fills the width of its parent. In this case, max-width means if your parent is larger then take on the max-width and if your parent is smaller than min-width then take that value.

On the other hand, a floated block element with no width set will shrink to the size of its contents.

Solution:

You basically have to move your min/max width to an outer wrapper div which is not floated as you did, and then float the inner flex-text inside so that the background will only fill the area containing text:

So your markup becomes:

<div class="wrapper">
    <div class="flex-text clearfix">
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
    </div>
</div>
<div class="wrapper">
    <div class="flex-text clearfix">
        Lorem ipsum dolor sit amet.
    </div>
</div>
<div class="wrapper">
    <div class="flex-text clearfix">
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    </div>
</div>

So your css becomes:

.wrapper{
    min-width: 200px;
    max-width: 400px;
}

.flex-text {
    background: #def;
    float:left;
}

Also, since you are floating .flex-text, make sure to add a clearfix.

DEMO

1
  • Yep, it's one way of doing it, but unfortunately I can't use it because the float way of solving this breaks a lot of other things. Runar's table solution is the best for me, but Nit's answer is probably what most people googling for this will want (it's what I'd use if I didn't already have a complex layout that I can't totally reengineer now). But you have my upvote because your idea works in some cases
    – NeuronQ
    Apr 25, 2014 at 9:15

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.