How do I align two non-fixed width divs in the center of the browser screen?


Tags: css,layout,alignment,center

Problem :

I want to align two non-fixed width divs in the center of my screen and I want both to appear on the same horizontal plane. I would like no margin between the right edge of the left div and the left edge of the right div. So I whipped this up …

<div id="container">
    <div id="left"><%= render 'form' %></div>
    <div id="right"><%= render 'totals' %></div>
</div>

and then added this CSS

#container {
        display: block;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
}

#left {
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        background-color: green;
        float: left;
        display: inline-block;
}

#right {
        float: right;
        background-color: red;
        display: inline-block;
}

but disappointingly, the left DIV appears at the far left of the browser screen and the right div appears at the far right of the browser (using Chrome on Mac) and there is a wide space in between the DIVs). How can I correct the above to eliminate the space between them?



Solution :

Get rid of your floats. Then put font-size: 0 on #container and font-size: 16px on the children.

#container {
   font-size: 0;
}
#left, #right {
   font-size: 16px; //You can use font-size: initial if you don't care about IE
}

JSFiddle


    CSS Howto..

    How can I mark it up? [closed]

    How to prevent a p:menubar from being overlapped by the contents of a CSS template?

    How do I vertically center an image whose size can change in a div?

    custom styles not effecting the nested accordion jquery - How to fix

    How can I use d3.js filter to assign different css classes to elements?

    How to optimize CSS file for speed

    How to add a third level to my CSS drop down menu

    How do I absolute position a div from left to the right using media queries?

    How to create a Dribbble-esque image hover effect?

    How to break up long words but leave out short ones?

    How to place a css counter-increment below a paragraph of text?

    How would you explain CSS positioning to a human being?

    How do I control the height of the main content area no matter how much text is in there?

    How to create a white border circle having white exclamation mark inside a box having a yellow background in html/css?

    How to align a flash movie to center with “overflow: hidden”?

    How to place three div tags one below another?

    How to compile sass / scss without creating map files

    How to fill a QTextBrowser with a single table in Qt?

    CSS: How to set position absolute of a span inside a relative-position-div which contains [closed]

    CSS: How to limit length of the border-bottom div?

    CSS3 Challenge - How to get this gradient background pattern without using all the divs?

    How to update a div with another image in angular?

    How do I align this CSS correctly?

    How to hide crossed-out CSS lines on firebug?

    How do you find the dimensions of a “display: none” element?

    How to make the background image responsive

    How to update element.styles css

    how to use pseudo-classes (like after, before) inline in CSS

    how to collapse navbar in twitter bootstrap after click on link if it woud be collapsed because of css? [closed]

    How do I control a css child property with javascript?