HTML/CSS: How to center floating divs?


Tags: html,css

Problem :

I have this HTML:

<div id="container">
    <div id="boxContainer">
        <div id="box1">
            <span>Text1</span>
        </div>
        <div id="box2">
            <span>Text2</span>
        </div>
        <div style="clear:both;"></div>
    </div>
</div>

and the following CSS:

#container {
    width:100%;
    background-color:yellow;
}

#boxContainer {
    margin: 0px auto;
    background-color:black;
}

#box1 {
    float: left;
    background-color:blue
}

#box2 {
    float: left;
    background-color:red
}

I expect the #boxContainer's width to match the sum of width of #box1 and #box2, but it is 100% and therefore it is not centered in the #container. Why?

I have this fiddle showing the issue: http://jsfiddle.net/dennismadsen/dxbfpbg1/



Solution :

Block-level elements that are not floated (like your #boxContainer div) will default to 100% width. You can change it to display: inline-block to only take up the space that it needs. You can then center it with text-align: center on its parent element.

#container {
    text-align: center;
    width:100%;
    background-color:yellow
}

#boxContainer {
    display: inline-block;
    margin: 0px auto;
    background-color:black;
}

#box1 {
    float: left;
    background-color:blue
}

#box2 {
    float: left;
    background-color:red
}

Updated fiddle: http://jsfiddle.net/dxbfpbg1/2/


    CSS Howto..

    How to get rid of column border of gridview using CSS

    How can I use :before property to create a square before a span

    How to add CSS AnimationEnd event handler to GWT widget?

    How to make gradually changing background in CSS become uninterruptible?

    How are multiple spaces showing in HTML, without pre, nbsp or white-space: pre?

    How to fix this CSS 3 code to make it working properly on the server?

    CSS: How to create special shape

    How to get rid of the bottom shadow in label of the css tabs

    How to change a defined value to a unspecified value by css?

    Why my tabs (i.e HOME, ABOUT ME..) doesn't show the corresponding paragraph or section?

    Using css modules, how can I use composes to include a list of variables for colors

    How to print text between css selectors in golang using html package?

    How to get CSS to E-Mails back in Magento 1.9.1

    CSS3 - How to “restore” ::-webkit-scrollbar property to the default scroll bar

    How to centralise a button div

    How to read and show accelerometer data (server side) using JavaScript and Node.js

    How do I keep my footer at the bottom of the page without it coming up automatically to fill space if there is little content?

    How to have a color change animation on a button outline?

    how to create css gradients and shadow

    how do i avoid this title from overflowing?

    How to minimize the no of css

    How to make the divider between two tbody elements moveable

    How can I integrate the code from this pen onto my site?

    Ascii character codes shown as text in browser [duplicate]

    How do I justify a horizontal list?

    How to make element fade in on page scroll?

    How to vertically center in yui-pure-css?

    how to create an anchor point

    How do you make a div display two inline items that stretch the width?

    how to disable the highlighting view on selection either in html or css?