ansaurus

Question

centering a div without setting width

Answer 1

+2 A:

~~If you want to center a div in its container, try setting margin-left and margin-right of the container to auto.~~

It looks like somebody had the same problem you did. Hopefully this is better than my first recommendation. :)

http://www.leveltendesign.com/blog/nickc/centering-a-css-menu-without-width-aka-shrink-wrap

Andy West 2009-11-29 04:06:13

the width must be set for this to work.

carillonator 2009-11-29 04:14:05

Ah, yes. My mistake. Now I understand why this question was asked in the first place.

Andy West 2009-11-29 04:19:54

+1 for the informative link. Good stuff. Bookmarked!

Doug Neiner 2009-11-29 04:45:48

Answer 2

+1 A:

Based on what I believe you are asking, you want to center a div dynamically, given that the width will change based on how many menu items are visible. I assume you would also like this to dynamically center itself on resize as well. This can be done with some simple javascript as shown below. I have mocked up an example you can play with, works in IE and FF. The javascript is the key. Also of note, although not part of your question, it may make sense to control the min-width on resize...ping me if you run into that.

<html>
<head runat="server"></head>
<body onload="centerMenu()" onresize="centerMenu()">
<form id="form1" runat="server">
    <div id="menuWrapper" style="display:inline; height:20px;">
        <input type="text" value="menuItem" />
        <input type="text" value="menuItem" />
        <input type="text" value="menuItem" />
        <input type="text" value="menuItem" />
    </div>
</form>
 <script type="text/javascript">
 function centerMenu() 
 {
     //Wrap your menu contents in a div and get it's offset width
     var widthOfMenu = document.getElementById('menuWrapper').offsetWidth;
     //Get width of body (accounting for user installed toolbars)
     var widthOfBody = document.body.clientWidth;
     //Set the width of the menu Dynamically
     document.getElementById('menuWrapper').style.marginLeft = (widthOfBody - (widthOfMenu)) / 2;
 }
</script>
</body>
</html>

PortageMonkey 2009-11-29 07:32:52

Answer 3

A:

How about

  #form1 {text-align:center}  
  #menuWrapper{display:inline-block;text-align:left}

Also, it woudl be more accessible to mark up your menu as follows:

<form id="navWrapper">
   <ul>
      <li><input></input></li>
       ...
   </ul>
</form>

and use

  #navWrapper {text-align:center}  
  #navWrapper ul {display:inline-block;text-align:left}
  #navWrapper li {display:inline}

wheresrhys 2009-11-29 10:47:42

Answer 4

A:

hard to tell without seeing exactly what your trying to achieve but this should at least help...

Your CSS

#main {
    width:100%;
    text-align:center;
}

#nav {
    margin:0 auto;
}

#nav ul li {
    display:inline;
}

#content {
    text-align:left;
}

Your HTML

<div id="main">
    <!-- Your Navigation Menu -->
    <div id="nav">
     <ul>
      <li>Nav 1</li>
      <li>Nav 2</li>
      <li>Nav 3</li>
     </ul>
    </div>
    <!-- Your Content Area -->
    <div id="content">
     Lorem ipsum dolor sit amet, consectetur ...
    </div>
</div>

luckykind 2009-11-29 14:25:22

this works (to some degree :)It's not working where I intend it to, but I'll have to go through the css files to see if there's any conflicts.But the some degree refers to the centering. It centers the left side of the content, so the centering is a bit off. I've tried adding a 40px padding on the right inside #nav, but that means adding a static value to the equation. Although the 40px works, depending on the size of the elements it will tend to hang to one side or the other

Daniel 2009-11-29 17:34:29

yeah... like I said it's hard to tell without seeing exactly what you're doing... but it sounds like a conflict with some other styling... this definitely works on it's own, and you want to stay away from adding static values if you're trying to center something. Try temporarily adding "border:1px solid red;" to the problems areas so you can see better on how it's laying out...

luckykind 2009-11-29 18:25:19

Answer 5

A:

here a nice workaround for centering a div with no width.

is tableless and is working in any browser!

snowalker 2010-05-14 01:59:20

ansaurus

tags:

views:

answers:

centering a div without setting width

related questions