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 to make to border-bottom line longer with CSS

    jquery - How to determine if a div changes its height or any css attribute?

    How do you style an android app?

    How to make this CSS compatible with IE browsers? [closed]

    Background Image in WebView showing in Simulator, but not on Device

    How to move elements inside the left column of a 2 column css grid above and below the main content area on collapse

    how to scale img by percentage of self and not percentage of its container

    How to Prevent Linke break for Divs in CSS?

    How overlay two pictures to another using HTML-CSS?

    How to force a hover state with jQuery?

    How to make text “Passed” and progress bar appear in line in smaller views?

    How to change a CSS property dynamically in Angular

    CSS/CSS3 - How to make background-color in table row without spaces between table-cells?

    How can I make my div to remain fixed and no longer change position?

    How to add a fancy frame for an img if you only know its width?

    How do you make speech bubble with Tooltipsy?

    how to put img inside circle in html and css?

    How to make a width binding in CSS

    How to Make a materialize CSS button's width same as col s12?

    How to automatically resize the wrapper div using CSS

    How do you position divs on a line with space in the middle, without fixing the width of the container?

    HTML, CSS - I want to create a button “Preview” which will show user his input

    How can I make the menu to wrap when I resize my browser?

    How to Layout a Watermark Image that is transparent along with a banner image and content div?

    How to encapsulate CSS, especially for popups and no iframe involved?

    How to assign margin to child div to not float out of the parent div?

    How to add space to left-right of the Web-Page using HTML/CSS

    How to make CSS background-image responsive? [duplicate]

    CSS: Changing div's property on another div's a:hover. Possible ? How?

    How a sloping/leaning background colour can be set to a text with HTML-CSS