current community

your communities

more stack exchange communities

Stack Exchange
tour help
stack overflow careers
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free.
up vote 12 down vote favorite
3

I have an unordered list like in the example demo

li {
  display: block;
  border: 1px solid lightCoral;
  list-style: none;
  padding: 4px 6px;
  margin: 5px;
  width: 150px;
  min-width: 120px;
  max-width: 250px;
}
    
li:last-child{
  width: 200px;
}
<ul>
  <li> first item </li>
  <li> second item very long content </li>
  <li> third item </li>
  <li> This is 200px wide</li>
</ul>

I want the li items to be at least 120px wide and at most 250px. If I don't set the width, they automatically set it to max-width. But if I set it to 150px like in the demo, then why doesn't the second one get its maximum allowed width, i.e. 250px even if its content doesn't fit into a single line?

Is there something I am missing? Can this be done with pure CSS?

share|improve this question

8 Answers 8

up vote 12 down vote accepted

A div takes by default 100% of its parent's width. So it will take the max-width.

To accomplish what you want, float them and clear both sides:

li {
  display: block;
  float: left;
  clear: both;
  border: 1px solid lightCoral;
  list-style: none;
  padding: 4px 6px;
  margin: 5px;
  min-width: 120px;
  max-width: 250px;
}
<ul>
  <li>first item</li>
  <li>second item very long content</li>
  <li>third item</li>
  <li>This is 200px wide</li>
</ul>

share|improve this answer
up vote 3 down vote

The behaviour you want is possible if you wrap your <li> content inside a <div> container. You can then make the <div> containers inline-block along with width: auto; so that they don't conform to having identical lengths and thus you get the bordered boxes around your list elements to be determined by their content as shown in the snippet below.

li {
  list-style: none;
  margin: 5px;
}

li > div {
  display: inline-block;
  border: 1px solid lightCoral;
  width: auto;
  padding: 4px 6px;
  min-width: 120px;
  max-width: 250px;
}
    
li:last-child > div{
  width: 200px;
}
<ul>
  <li><div> first item </div></li>
  <li><div> second item very long content </div></li>
  <li><div> third item </div></li>
  <li><div> This is 200px wide</div></li>
</ul>

share|improve this answer
up vote 3 down vote

The display: table property can be used to achieve the effect you want. If you do not set width, the element extends along the length of the content, otherwise the sum of the width of the margin, border, padding, width. 

li {
    display: table;
    border: 1px solid lightCoral;
    list-style: none;
    padding: 4px 6px;
    margin: 5px;
    width: auto;
    min-width: 120px;
    max-width: 250px;
}
li:last-child{
    width: 200px;
}
<ul>
  <li>first item</li>
  <li>second item very long content</li>
  <li>third item</li>
  <li>This is 200px wide</li>
</ul>

share|improve this answer
    
the code you provided may resolve the issue but please add a brief description as to how this resolves the issue. Welcome to Stack Overflow, recommended reading How to Answer. –  Dan Beaulieu 23 hours ago
    
The display: table; property is the basis for correct display. If you do not set width, the element extends along the length of the content, otherwise the sum of the width of the margin, border, padding, width. –  ErmineSoft 22 hours ago
    
Thanks for updating, I added your text to your answer. You have access to editing your post if you look at the bottom left of it. –  Dan Beaulieu 22 hours ago
up vote 1 down vote

That's because you set the width to 150px. If you remove the width attribute or give the auto value to it then it will work as expected. Of course, all the items will get the width of the longest of them: updated demo

li {
    display: block;
    border: 1px solid lightCoral;
    list-style: none;
    padding: 4px 6px;
    margin: 5px;
    width: auto;
    min-width: 120px;
    max-width: 250px;
}
share|improve this answer
    
This sets them all to 250px unless otherwise specified. –  somethinghere yesterday
    
this is not good. I wrote that if I omit width: 150px it sets it to max-width. It's the same with width: auto. Try this jsfiddle.net/okbu83mc/3 If the content is small enough I don't want my list items to have the maximum width. –  1l13v yesterday
up vote 1 down vote

This is not a problem, is the normal behaviour of display: block elements. If you need that the width be the content's width you can make a display:inline-block, and float:left; clear:both to avoid the stack problem

li {
  display: inline-block;
  border: 1px solid lightCoral;
  list-style: none;
  padding: 4px 6px;
  margin: 5px;
  width: auto;
  min-width: 120px;
  max-width: 250px;
  clear:both;
  float:left;
}
    
li:last-child{
  width: 200px;
}
<ul>
  <li> first item </li>
  <li> second item very long content </li>
  <li> third item </li>
  <li> This is 200px wide</li>
</ul>

share|improve this answer
up vote 1 down vote

Here is the solution updated fiddle : https://jsfiddle.net/okbu83mc/5/

Your CSS

li {
 display: block;
 float: left;
 clear: both;
 border: 1px solid lightCoral;
 list-style: none;
 padding: 4px 6px;
 margin: 5px;
 min-width: 120px;
 max-width: 250px;
}

Your HTML

<ul>
 <li> first item </li>
 <li> second item very long content </li>
 <li> third item </li>
 <li> This is 200px wide</li>
</ul>
share|improve this answer
up vote 0 down vote

for your info max-width is default not set if main width is bigger of max-width then apply max-width.

li {
  display: block;
  border: 1px solid lightCoral;
  list-style: none;
  padding: 4px 6px;
  margin: 5px;
  width: 300px;
  min-width: 120px;
  max-width: 250px;
}
    
li:last-child{
  width: 200px;
}
<ul>
  <li> first item </li>
  <li> second item very long content </li>
  <li> third item </li>
  <li> This is 200px wide</li>
</ul>

share|improve this answer
2  
I can't really make head nor tails of your first sentence... –  somethinghere yesterday
up vote 0 down vote

You should set width to auto:

width: auto;

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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