css min-width issue

Question

.mainCoverWrapper {
    position: relative; 
    min-width:312px; 
    background:red
}

I'm trying to center a div with min-width of 312px and make it expand according to its dynamic content while keeping it centered. Right now the min-with doesn't work at all because it needs a float. I can't use a float because I need the div centered on the page.

In other words, div starts out with margin auto with a width of 312px and expands with its added content while being centered. Is this possible?

Any help would be greatly appreciated.

Can't understand your question. So, the div starts with 312px. And then when you add content into your div, the div's width will expand accordingly? — He Hui, Mar 29 '13 at 02:18
If that's what you're asking, it's impossible with CSS. you'll need javascripts/jquery. — He Hui, Mar 29 '13 at 02:21
@He Hui, I supspected that. Javascript would be fine but I don't know how to do that either. Thanks for the help. — user2222999, Mar 29 '13 at 02:23

score 0 · Answer 1 · edited May 23 '17 at 12:04

0

If you want the width to be fluid, your best bet is to set display: inline-block; on the to-be-centered element, and text-align: center; to the parent element.

See: CSS center display inline block?

edited May 23 '17 at 12:04

Community

1
1

answered Mar 29 '13 at 02:25

Matthemattics

9,577
1
21
18

yes, that would work but Firefox doesn't seem to render the inline-block properly. The div does not expand. Thanks. – user2222999 Mar 29 '13 at 02:30

score 0 · Accepted Answer · answered Mar 29 '13 at 02:48

http://jsfiddle.net/FVmvA/

Here's a working example of the parent to follow the width of the child, and the child will expand according to the text given in it.

.myCoverWrapper {
    border: 1px solid Peru;
    margin:auto;
    min-width: 200px;
    max-width: 100%;
    display: inline-block;
    background: red;
}

.test {
    height: 100px;
    margin: 10px;
    background: cyan;
}

This makes the parent div follow the width of the kid.

This however, will disallow you to "center" it. There's no way you can have both. This is because you cant center an image without knowing the width of the element.

The solution is to use jQuery, to add CSS in when necessary.

Here's an example. There's some bugs, but well, you have the general idea.

Also, set text-algin to the `test` div if you want to center align the text. — He Hui, Mar 29 '13 at 02:56
It worked but the javascript is not necessary. The answer below is also good. Thanks for the quick answer. — user2222999, Mar 29 '13 at 06:24

css min-width issue

2 Answers2