CODEWITHSUNDEEP
htmlcss
Tamim Addari
Tamim Addari

Reputation: 7821

float in the center in CSS?

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.

Upvotes: 1

Views: 110

Answers (3)

bot
bot

Reputation: 4911

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

Upvotes: 0

Falguni Panchal
Falguni Panchal

Reputation: 8981

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

Upvotes: 0

aBhijit
aBhijit

Reputation: 5361

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.

Upvotes: 1

Related Questions