CODEWITHSUNDEEP
css
user2127833
user2127833

Reputation: 181

How to have a div expand to left and right?

I have a div with a min and max width.

CSS

#box{
    position: absolute;
    top: 50px;
    left: 100px;
    min-width: 180px;
    max-width: 320px;
    height: 180px;
    border: 1px solid black;
    overflow: hidden;
}

http://jsfiddle.net/5QdFS/

When I type something long into the box it expands to the right. Is it possible to make the box expand to both the left and right evenly?

Upvotes: 1

Views: 4947

Answers (2)

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85545

You have set left value to 100 pixels which could not let you expand left and right evenly.

Edit

If you don't need absolute position then you could do this by setting margin: 0 auto; and display: table; to your div.

Demo

Upvotes: 2

omma2289
omma2289

Reputation: 54619

You could use a container with text-align:center; like so:

HTML

<div class="container">
    <div id="photo"></div>
</div>

CSS

.container{
    text-align: center;    
}
#photo{
    min-width: 180px;
    max-width: 320px;
    height: 180px;
    border: 1px solid black;
    display: inline-block;
    text-align: left;
    margin-top: 50px;
}

Example fiddle

Upvotes: 4

Related Questions