Creare header con 2 colonne: logo a sinistra e banner a destra

[allin81]

Salve
avrei necessita' di capire come posso creare un header con due colonne.
ho sempre usato le tabelle e tutto era facile, ma con i div come ottengo lo stesso risultato?

in pratica dovrei posizionare il logo all'estrema sinistra ed un banner con un numero di telefono sull'estrema destra, entrambi sulla stessa riga.

avete un esempio da seguire?
grazie

[carlomarangoni]

Devi usare la regola css float
http://www.html.it/pag/42450/float-e-clear/
http://www.html.it/articoli/float-teoria-e-pratica-1/

[allin81]

Ciao
ma lo sto usando, ecco il css

div#sotto_header{
    float:left;
     line-height:0;
    background:#FFFFFF;
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    padding:8px;
    width:1033px;
    border-left: 1px #3e7da3 solid;
    border-right: 1px #3e7da3 solid;
    border-bottom: 3px #dddddd solid;
}

div#breadcrumbs{
    float:right;
    font-family: 'PT Sans Narrow', sans-serif;
    color:#779dd4;
    font-size: 15px;
    font-weight:bold;
}

e questi sono i div

    <div id="sotto_header">
    <?php
    if (function_exists('dynamic_sidebar') && dynamic_sidebar('Sotto Header')): else : ?>
    <?php endif; ?>

        <div id="breadcrumbs">
        <?php
        if ( function_exists( 'breadcrumb_trail' ) ) breadcrumb_trail(); 
        ?>
        </div>
    </div>

allego lo screenshot che mi esce... i 2 elementi non sono allineati

[ResianTaxidrive]

La domanda non è chiara, a che parte di codice html corrisponde il pulsante "prenota in sicurezza"? E che stile gli è associato? NOn postare codice php, posta codice html.

[allin81]

Prenota in sicurezza fa parte del div "sotto_header", poi affianco ho il div "breadcrumbs"

[ResianTaxidrive]

Direi che probabilmente quel pulsante occupa tutta la larghezza disponibile e quindi i breadcrumbs si mettono nel primo posto libero disponibile. Io darei una larghezza più corta al pulsante e poi metterei un margin-top al creadcrumbs

[allin81]

ora sono arrivato a questa situazione

div#sotto_header{
    float:left;
     line-height:0;
    background:#FFFFFF;
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    padding:8px;
    width: 98.4%;
    height: auto !important;
    border-left: 1px #3e7da3 solid;
    border-right: 1px #3e7da3 solid;
    border-bottom: 3px #dddddd solid;
}

div#breadcrumbs{
    float:right;
    margin-top:-15px;
    font-family: 'PT Sans Narrow', sans-serif;
    color:#779dd4;
    font-size: 15px;
    font-weight:bold;
}

Ora riesco ad allineare le 2 cose, l'unico problema e' che quando faccio il resize della pagina per testare la visualizzazione su mobile, i breadcrumbs si sottopongono all'immagine e quindi non si vedono

[ResianTaxidrive]

Non mi è chiara una cosa, tu hai uno stile per #sotto_header il quale contiene sia il pulsante verde sia i breadcrumbs. Perchè non hai uno stile solo per il pulsante verde?

[allin81]

Ecco, ho messo l'esempio online cliccando qui

http://bit.ly/1GlGZ2o

Il pulsante verde (che poi non è altro che una semplice immagine png) fa parte del div sotto_header, non prende li' il suo stile?

[ResianTaxidrive]

Vedo una pagina di sito in manutenzione e cliccando sul link trovo un sito fatto con tabelle.

No, perchè un figlio di sotto_header dovrebbe prendere lo stile del padre?