Geek Answers Handbook

HTML / CSS: creating a centered div with minimal width

I would like for my page to have a div that is centered and has a certain width, but which goes beyond that width if the content requires it. I do 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 fine on Firefox / Safari, but not on IE6, which does not understand display: inline-block . Any tips on how to make this work on IE6?

+4
source share
3 answers

These are not ideal solutions, but I am having some problems with IE6 that do not support the minimum width, speaking.

 <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>

Another tag that can help in this situation is an overflow tag.

+4
source

Actually Alessandro IE6 understands display: inline-block , that it does not understand about your code, it is min-width . There are many hacks to make this work , but I would not recommend any of them. If you intend to use any of them, be sure to place them in a special IE6 style sheet so that they do not interfere with your other more ordinary browsers with complaints.

+1
source 
 <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>
0
source

More articles:


All Articles