CODEWITHSUNDEEP
htmlwidthcss
avernet
avernet

Reputation: 31753

HTML/CSS: Creating a centered div with a min-width

I'd like to have on my page a div which is centered and has a certain width, but which extends beyond that width if required by the content. I am doing this with the following:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <style type="text/css">
            .container-center {
                text-align: center;
            }
            .container-minwidth {
                min-width: 5em;
                display: inline-block;
                border: 1px solid blue;
            }
        </style>
    </head>
    <body>
        <div class="container-center">
            <div class="container-minwidth">
                a
            </div>
        </div>
    </body>
</html>

This works great on Firefox/Safari, but not on IE6, which doesn't understand the display: inline-block. Any advice on how to make this work on IE6 as well?

Upvotes: 4

Views: 5810

Answers (3)

Jace
Jace

Reputation: 1

<style type="text/css">            
        .container-minwidth {
            min-width: 5em;
            _width: 500px;
            white-space:nowrap;

            display: inline-block;
            *display:inline;
            *zoom:1;

            border: 1px solid blue;
        }        
</style>

Upvotes: 0

Nick Berardi
Nick Berardi

Reputation: 54894

Actually Alessandro IE6 does understand display: inline-block, what it doesn't understand about your code is the min-width. There are many hacks to get this to work, but I wouldn't recommend any of them. If you are going to use any of them make sure to put them in an IE6 specific style sheet so that it doesn't interfere with your other more standard complaint browsers.

Upvotes: 1

bendewey
bendewey

Reputation: 40245

Its not a perfect solutions, but I've gotten around some issues of IE6 lack of support for min-width by saying.

<style type="text/css">            
            .container-minwidth {
                min-width: 5em;

                width: auto !important;
                width: 500px; /* IE6 ignores the !important tag */

                /* would help for expanding content if it blows past 500px; */
                overflow:auto; 

                display: inline-block;
                border: 1px solid blue;
            }        
</style>

The other tag that might help in this situation is the overflow tag.

Upvotes: 4

Related Questions