Question

this may sound simple, I have made a div block which consists of buttons which should be lying horizontally one after another. The buttons are used for navigation and the number of buttons changes dynamically depending on the web pages.

Now my problem is to align these buttons center at the bottom of every page above the footer note and the alignment should also be in the flow depending upon the increase or decrease of the buttons.

<div class="container">
    <div class="content">
    </div>
    <div class="navButtons">
        <a href="back.php"><input type="button" value="BACK" class="butttons" /></a>              
        <a href="home.php"><input type="button" value="HOME" class="butttons" /></a>
        <a href="next.php"><input type="button" value="NEXT" class="butttons" /></a> 
    </div>
</div>

I have tried using margin: 0 auto;

margin-left: auto;
margin-right: auto;

But no success, they just stick to the left side of the page.

Here is the CSS for:

.container{    
    background: url('images/gray_bg.jpg');
    width: 900px;
    height: 800px;
    margin: 0 auto;        
    position: relative;
    overflow: auto;      
}

.navButtons{
    margin: 0 auto;
    float: left;         
}

Any good ideas of how this can be solved

Thanks

Answer 1

Seeing as < anchor > tags are inline items you can just do:

div.navButtons {
    text-align: center;
}

see this fiddle to see what i mean: http://jsfiddle.net/c4urself/ZvrZW/