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: [phone]</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