Question

Instead of defining a fixed width of a div, I want to specify a minimum width (if the content is very less), and a maximum width (if the content is more, hide the extra content).

For example, my html is:

<div class="container">
    <div class="test">x</div>
</div>

CSS:

.container{
    padding:10px; 
    border:1px solid red; 
    width:200px; 
    text-align:center;
}

.test{
    border:1px solid green; 
}

As you can see, the container has the fixed width of 200px. I want to place the test div in the center of container. Since there is only a single letter in the test class, so I want that the test class should be minimum 50px, but maximum 100px.

I’ve tried min-width and max-width, but couldn’t make it work. Here is the jsfiddle link.

Thanks for any help.

Answer 1

Here you go!

By using the margin:0 auto; you can get it centralised 🙂 (Just remove it if you dont want it centered)

http://jsfiddle.net/SnhhK/4/