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..

    twitter bootstrap: How to span links in the navbar?

    How to force my text to not break into lines in css?

    How to center an input tag in fieldset when using codeigniter?

    How to apply CSS only if class exists elsewhere in code?

    How to make my two sections vertically align, even when scaled, with different amounts of content?

    How to center navigation that has icons so text is aligned to icons?

    how to Styling a “choose file” button using css Only

    How to create a multi colored circle in html and css

    How do I add a transition to this rollover?

    How to make a
    container width and height for each same as “the value of clientWidth and clientHeight in maximized window”?

    How do I use li:hover to change the WHOLE li color?

    How to define css selector class prefix with SASS

    How do I convert a text to css hex value?

    how to align bootstrap nav menu with another div?

    How to make a double color single border using css?

    How to use a Video as text background in css

    How to make a simple pure css or jquery image toggle?

    How to have different lightbox for different object

    Show/Hide elements in a table

    CSS how to make a fixed height?

    How to copy (or reflect instantly) CSS edited on Inspected elements on the browser to the actual css file?

    How to change the size of the radio button using CSS?

    How to apply jquery ui styling on dynamically generated elements

    How do I create two columns using CSS?

    How can my css div with the display flex property be alignd to the right when it's wrapping?

    How to stop some css from getting applied to all
  • tag
  • css: How to change row color of a table after its been selected and clicked away

    How to defferent row heights for different rows in a single table?

    How to make a circular button out of a PNG image?

    How to include CSS for a specific part of the page