how to position two divs next to each other, one of them is centered in the container of both divs


Tags: css,html

Problem :

how to position two divs next to each other, one of them is centered in the container of both divs

How can I position the second div directly next to the first one and make it expand to the right side ?

here is an example :

http://jsfiddle.net/Dpcq4/3/

HTML:

<div id="container" >
    <div id="div1"> </div>
    <div id="div2"></div>
</div>

CSS:

  #container{ width: 100%;
              display:inline;
              height:60px;
              color:#000;
    }
    #div1{ margin-left:auto;
           margin-right:auto;
           width:200px;
           height:50px;
           background-color:#333;
    }
    #div2{ float:right;
           width:100%;
           height:50px;
           background-color:#ccc;
    }

thanks.



Solution :

Check this out: http://jsfiddle.net/GTduj/2/

#container{ 
    width: 600px; 
    height:60px; 
    border:1px solid #bbb;
    text-align:center;
}

You need a fixed width for your container element, and you want to center it's contents.

#div1{        
    width:60%;
    display:inline-block;
    height:50px;     
    background-color:#333; 
}

div1 could be a % width or fixed, but it needs to be inline-block.

#div2{        
    display:inline-block;
     width:10%; 
    height:50px; 
    background-color:#ccc; 
    margin-right:0;    
    position:absolute;    
}

Use inline-block and absolute position for div2 and so it will hang off after your centered div1.


    CSS Howto..

    How can CSS translate elements away from one point?

    Dropdown Menu doesn't show all links and can't change css social media icons color

    How to center horizontally a div within an li in CSS

    How to add space between border line and menu item

    how to make input and select look nice beside eachother with custom height?

    How do I do image color blend in css?

    How to change 1 out of a menu/model thing with css instead of a whole model/menu?

    How can I increase space just above the footer line?

    How to animate a child element with dynamic width content to the center of its parent div, jquery, greensock, css

    How to prevent inherit for H1?

    JQuery toggled div not showing on resize

    How to get @media to take precedence over normal styling

    How to center two square blocks in page?

    How to call a jquery funcion with a css button?

    How do I get placeholder text in firefox and other browsers that don't support the html5 tag option?

    How to remove top border for one element in a list

    How to center a border-width shape properly, relative to its parent input button?

    CSS - How to make different background color from css file used [closed]

    How to place a div at top center position of a page using css…?

    How to prevent css borders from floating to the top of parent div

    Simple Form button submit doesn't show in IE 8-7

    How can I hide the extra list items that don't fit within a fixed-height box?

    Show range slider above Bootstrap progress bar (in navbar)

    How to use metro ui css sidebar and compact classes

    How can I make this button image appear in Firefox 2.0 the same as it does in IE7?

    css breadcrumbs breaks into 2 lines, how to controll it in responsive?

    Sencha Touch 2: How to handle custom css files while production build?

    How to limit a to only three lines?

    How to make a key shape using css?

    How to make div box actually touching the side of the browser as mine has a gap?