css html lyout with divs and same class

Question

Please help. I want to achieve that text and button on yellow box be alligned left and right (text on left side - margin 20 px; button on right side - margin 20 px) and menu in footer aligned with yellow box.

I can't add picture, sorry.

Edit: Added JSFiddle - http://jsfiddle.net/wqBEf/

This is my css code:

        #page
    {
        width: 960px;
        margin-left: auto;
        margin-right: auto;
        border: 1px solid red;
        background-color: blue;
    }

    #page > #main
    {
        border: 1px solid #000;
        width: 650px;
        margin-left: auto;
        margin-right: auto;
        background: white;
        border-radius: 5px;
        margin-top: 20px;
    }

    #main > #inner
    {
        margin: 20px;

    }

    #page-title h1
    {
        font-size: 24px;
        text-align: center;
    }

    #footer-hotline
    {
        height: 50px;
        background-color: rgb(255,207,0);
        border-radius: 5px;
        box-shadow: 0px 3px 3px #999999;

        margin-top: 20px;
        border: 1px solid #000;
        width: 650px;
        margin-left: auto;
        margin-right: auto;

        position: relative;
        z-index: 2;
    }

    #footer-hotline > .part
    {
        float: left; width: 33%;
        margin-left: 20px;
        line-height: 50px;
        font-size: 16px;
        font-weight: bold;
    }
    #footer-hotline > .part input
    {
        vertical-align:middle;
    }

    #footer
    {
        margin-top: -25px;
        height: 100px;
        line-height: 25px;
        background-color: white;
        text-transform: uppercase;
        border: 1px solid black;
    }

    #footer > .link
    {
        float: left;
        border-right: 1px solid #000;
        margin-top: 50px;
    }

    #footer > .link > div
    {
        margin-left: 5px;
        margin-right: 5px;
    }

And this is my html code:

<div id="page">
<div id="main">
    <div id="inner">
        <div id="page-title">
            <img src="myLogo.png" alt="Schulz logo" />
            <h1>Some title</h1>
        </div>
        <div id="content">RenderBody</div>        
    </div>
    <div class="f-c"></div>       
</div>
<div id="footer-hotline">
    <div class="part">Hotline: 0800/888 888</div>
    <div class="part"><input type="submit" class="button" id="callback-button" value="callback" name="callback-button" /></div>
</div> 
<div class="f-c"></div>
<div id="footer">
    <div class="link"><div><a href="#">GTC</a></div></div>
    <div class="link"><div><a href="#">About</a></div></div>
    <div class="link"><div><a href="#">Help</a></div></div>
    <div class="link"><div><a href="#">Language</a></div></div>
</div>

Thanx for answers, suggestions and comments.

Answer 1

You could use the :first-child pseudo-class for the issue of getting the two items to work together (this will only work if you have only two at any one time). It's also well supported going back to IE7

You also need to implement float:right, direction:rtl, and margin-right:

#footer-hotline > .part
{
    float: right; width: 33%;
    direction: rtl;             
    margin-right: 20px;
    line-height: 50px;
    font-size: 16px;
    font-weight: bold;
}
#footer-hotline > .part:first-child
{
    direction: ltr;
    float: left;      
    margin-left: 20px;
}

Eli Gassert's answer should suffice for centering the nav

Source: http://jsfiddle.net/YZ2Uz/
Demo: http://jsfiddle.net/YZ2Uz/show

Answer 2

See http://jsfiddle.net/wqBEf/1/ for an update.

Noteworthy changes.

• I added left align-left and right align-right classes set for float and for text alignment, respectively.
• I set your links to display: inline because it is the easiest way to center a list of items horizontally.

Those were the main two changes. The rest of the changes were just to support the above two, such as removing/adding some margins.