Q:

Occupy whole width between 2 cornered elements

I need to make a layout in CSS, somewhat like this. 
Green & red are 2 squares on left and right corners respectively. How do I make Yellow region occupy all the space in between, and also align the text in ('Login', in the screenshot) as centered.
Also I tried couple of things with Twitter-Bootstrap too. col-md-1, pull-left etc. didn't quite achieve what I intended. Any help is appreciated. 

Here is my working code (without any Bootstrap)
<head>
<style>
    #myContainer{
        background-color: silver;
        overflow: hidden;
        height: 50px;
        width:100%;
    }

    #leftLogo{
        width:40px;
        height:40px;
        background-color: green;
        float:left;
    }

    #rightLogo{
        width:40px;
        height:40px;
        background-color: red;
        float:right;
    }

    #labelText{
        height:40px;
        float:left;
        width:100%-80px;
        background-color: #f3ff11;
    }
</style>
</head>

<body>
<div id="myContainer">
    <span id="leftLogo"></span>
    <center>
    <span id="labelText"><H2>Login</H2>></span>
    </center>
    <span id="rightLogo"></span>
</div>

A:

You can use display:table and display:table-cell to achieve this.
First fix your markup:
<div id="myContainer">
    <span id="leftLogo"></span>
    <span id="labelText"><h2>Login</h2></span>
    <span id="rightLogo"></span>
</div>

Then your CSS:
div, span, h2 {
    margin:0;
    padding:0;    
}    
#myContainer {
    background-color: silver;
    overflow: hidden;
    height: 50px;
    width:100%;
    display:table;
}    
#leftLogo, #rightLogo, #labelText {
    display:table-cell;
    height:40px;
}
#leftLogo, #rightLogo {
    width:40px;
}
#leftLogo {
    background-color: green;
}    
#rightLogo {
    background-color: red;    
}    
#labelText {
    text-align:center;
    background-color: #f3ff11;
}

Demo: http://jsfiddle.net/TjGC3/

A:

You can use position:absolute; to position your colored squares inside a wrapper with position:relative and width:100%;
FIDDLE
HTML:
<div id="myContainer">
    <div id="labelText">
        <span id="leftLogo"></span>
        <H2>Login</H2>
        <span id="rightLogo"></span>
    </div>
</div>

CSS:
 #myContainer{
        background-color: silver;
        overflow: hidden;
        height: 50px;
        width:100%;
    }

    #leftLogo{
        width:40px;
        height:40px;
        background-color: green;
        position:absolute;
        top:0;
        left:0;
    }

    #rightLogo{
        width:40px;
        height:40px;
        background-color: red;
        position:absolute;
        top:0;
        right:0;
    }

    #labelText{
        height:40px;
        width:100%;       
        background-color: #f3ff11;
        position:relative;
        text-align:center;
    }
    h2{
        line-height:40px;
        margin:0;
        padding:0;
    }

