Center a div with a dynamic width.

Curtis_Shirley
Curtis_Shirley used Ask the Experts™
on
I have a div that's content will mostly always be the same width but when it doesn't, the div should expand to fill the screen and create a browser horizontal scrollbar if needed. The div needs to always stay centered though. The height needs to be fluid to the content as well.

This is currently in a MOSS 2007 masterpage. So the normal sharepoint page layout content is fixed to 950px including the navigation but when someone views a list with a lot of columns, I need it to be able to expand as needed.

I know this can be done with tables but I need to use divs for bandwidth and search engine optimization.
I tried this example code but the div width is not dynamic to the content, it appears to let the text wrap.
 
<style type="text/css">
<!--
.ieBug{
        /*not sure of ie7, but ie 6 and lower do not understand margin:0 auto; which is supposed to center the element horizontally*/
        text-align:center;
}
.center_me {
        text-align:left;
        margin: 0 auto;
        width:50%;
        border:1px solid black;
} 
.content {
        background-color:lightblue;
        margin-left: 27px;
        margin-right: 27px;
} 
-->
</style>
<div class="ieBug">
        <div class="center_me" style="">
              <div class="content">Short textdfsaf  f  sdafsdafsdShort textdfsaf  f  sdafsdafsdShort textdfsaf  f  sdafsdafsdShort textdfsaf  f  sdafsdafsdShort textdfsaf  f  sdafsdafsd</div>
        </div>
</div>

Open in new window

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®

Commented:
Maybe you can use display:table and display:table-cell.

Author

Commented:
I tried that in both IE8 and Firefox 3.5 with no effect. The closest I have come if by setting a width: auto; on the master (centered) div which centered it with a dynamic width in IE8 but not firefox or safari.
Looks like you figured out the centering

So the question really is, do you need to support IE6?  If so then you'll have to do one of the common hacks.  If not, then you can just use min-width:950px in place of width:50%;
11/26 Forrester Webinar: Savings for Enterprise

How can your organization benefit from savings just by replacing your legacy backup solutions with Acronis' #CyberProtection? Join Forrester's Joe Branca and Ryan Davis from Acronis live as they explain how you can too.

Author

Commented:
I haven't figured out the centering at all. I figured out one technique to make it work in IE8 and that's all so I've abandoned it. It's sad that this can be done with a table so simply yet I can't make it work with only divs. I haven't had any luck with any other browsers.
I took your code, made the one change that I described in the previous post and it works in IE8 and FF3 the way I understand you to want it based on your question. Can you please elaborate as to the issue you are still having?

Author

Commented:
That code was something I thought was relatively similar. The problem is the page itself is much more complex and I'm realizing that  its more complex that I can describe and I'm not allowed to share the actual code with anyone else.
We can help even if you sanitize the code before posting.  Really we just need the structure parts.  The basis will still be the same as above, but then we can see any specific issues.  Also, if your page is using any of the standard css (i.e. core.css) libraries please let us know.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial