CODEWITHSUNDEEP
htmlcsswidth
clintgh
clintgh

Reputation: 2077

Expandable width of div in CSS

I am trying to make an expandable div that will have a minimum width of 200 px but will expand if the content is longer. the problem is the width always displays as 100%, If i put a width: 200px it will stay 200 and will not expand.

This is my CSS code for the div:

#section_title {
    background-color: #2b65ae;
    border-radius: 10px;
    color: #ffffff;
    padding: 5px 30px 0px;
    background-size: 100% 100%;
    font-size: 24px;
    min-width: 200px;
    height: 30px;
    text-align: center;
    font-style: italic;
    margin: 0 auto;
    text-transform: uppercase;
   -moz-box-shadow:    inset 0 0 8px #444444;
   -webkit-box-shadow: inset 0 0 8px #444444;
   box-shadow:         inset 0 0 8px #444444;
}

Upvotes: 0

Views: 1962

Answers (4)

Chris Heath
Chris Heath

Reputation: 432

If it's just for one line of content, then you can add a float to your css.

#section_title {
    min-width: 200px;
    height: 60px;
    background-color: rgb(14,87,145);
    float: left;
}

Example fiddle here.

Upvotes: 0

G.L.P
G.L.P

Reputation: 7217

Try like this:

#section_title {
display:inline-block;
width: auto;
min-width: 200px;
max-width:100%;  
}

Updated fiddle

Upvotes: 0

Nishant
Nishant

Reputation: 916

You can use this

div {
    float: left; /* or right according to your requirement */
    width: auto;
    min-width: 200px;
    max-width: 100%;
}

This will keep the minimun width 200, will expand on more content and won't go beyond 100% width.

Upvotes: 0

G-Cyrillus
G-Cyrillus

Reputation: 106058

You may use display:table properties to achieve this :

Update your CSS with :

display:table;
width: 200px;

DEMO , using just words and white-space to keep all on one line for the demo purpose.

Upvotes: 3

Related Questions