asked on

Center a div with a dynamic width.

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

flob9

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

Curtis_Shirley

ASKER

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.

GreatGerm

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

Curtis_Shirley

ASKER

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.

GreatGerm

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?

Curtis_Shirley

ASKER

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.

ASKER CERTIFIED SOLUTION

GreatGerm

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial