float in the center in CSS? - html

Question

How to center several boxes in CSS? Suppose I have a div "navigation". Now, the navigation margin is auto, that is, it is in the center, how would I add lists(display:inline) inside navigation that will expand navigation on both sides. I haven't set the width property so the width will be dynamically expanding. Its like float :center.

Answer 1

Set margin:auto and width:940px and you are done. You can change width as per your need. But giving some width is compulsory.
Check this fiddle and tell me if it helped you.
http://jsfiddle.net/JNMZ3/4/
You can change padding of the li elements for more space. And then adjust width of the navigation div to keep it in center.

Answer 2

try this
your css replace with
http://jsfiddle.net/JNMZ3/3/
.navigation li{
margin: 3px 6px 3px 6px;
display: inline;
border: 2px solid black;
padding: 2px;
zoom:1;
width:auto;
}

Answer 3

Here's a working one.
Use margin: 0 auto; will get your element centered most of the time. (Quick note: your element must have a declared width for this to work.)
The margin: 0 auto; rule is shorthand for 0 top and bottom margin, and automatic left and right margins. Automatic left and right margins work together to push the element into the center of its container.
The margin: 0 auto; setting doesn't work perfectly in every centering situation, but it works in a whole lot of them.
reference: You Can't Float Center with CSS
HTML
<div class="leftsidebar">a</div>
<div class="rightsidebar">b</div>
<div class="content">c</div>
CSS
.leftsidebar
{
height: 608px;
width: 100px;
background:red;
float:left;
}
.rightsidebar {
background:blue;
height: 608px;
width: 100px;
float:right;
}
.content {
width: auto;
margin:0 auto;
background:yellow;
height:608px;
}