Larghezza 100% dello spazio disponibile

[fluxKami]

Buonasera.
Ho un div largo il 100% della pagina che contiene 3 elementi allineati con float.

[PRIMO DIV (float left)] [ULTIMO DIV (float right)] [DIV MEZZO (con dentro un input)]
quindi l'output è il seguente
[PRIMO] [MEZZO] [ULTIMO]
Il primo e l'ultimo hanno dimensione "fissa". Quello di mezzo contiene un input e vorrei che avesse la dimensione massima possibile per risoluzione. Ovvero, se ho uno schermo di 1366px, il primo div è di 200px, l'ultimo di 300px, voglio che il div di mezzo occupi tutto lo spazio in mezzo di 866px. Se aumento/diminuisco la risoluzione/dimensione della finestra si ingrandisce/rimpicciolisce solo il div di mezzo.

Se imposto al div di mezzo width="100%" invece mi occupa il 100% di 1366px ed esce dal div principale.

Come faccio? Spero di essermi spiegato con sufficiente chiarezza.

[Floyd611]

Ciao
ci potrebbero essere diverse soluzioni.

I 3 box in percentuale....

il centrale in % e i laterali in px... dipende dal progetto.

Al tuo posto opterei per i 3 elementi tutti con float:left.

assegna i margini a dx e sx e vedi cosa viene fuori.

Mischiare dimensioni fisse e percentuali non è semplice, anche perchè devi fare i conti con il responsive, se il tuo sito lo è.

da fare diverse prove...

Saluti

[fluxKami]

Ti spiego meglio.
Questo è il link a cui sto lavorando: http://www.axive.it/axive2/desk.php

<header>
    
<div id="menu">
<div id="user"></div>
<div id="help"></div>
<div id="nav"></div>
<div id="add"></div>
<div id="home"></div>
<div id="cloud"></div>
</div>
    
<a href="index.php" id="logo"><img src="http://www.axive.it/axive2/images/logo.png"></a>
    
<div id="search">
<input id="searchinput" onInput="filter(this.value)" placeholder="Ricerca...">
<ul class="searchlist"><? require 'datiportafoglio.php'; ?></ul>
</div>

</header>

body {margin: 0;}
input {border: 0}

/* HEADER */
header {width: 100%; min-height: 43px; background: #1c1c1c;}
#logo {float: left;}
/* SEARCH */
#search {width: 100%; height: 43px; position: relative; float: left;}
#searchinput {height: 27px; margin-top: 8px; padding: 0 40px 0 15px; border-radius: 20px; background: url(http://www.axive.it/axive2/images/lens.png) no-repeat right #eaeaea; box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.32) inset; font-style: italic; color: #1c1c1c;}
#searchinput:focus {font-style: normal;}
.searchlist {list-style: none; text-decoration: none; color: #1c1c1c; width: 100%; padding: 0;}
.searchitem {text-transform: uppercase; display: none; border: 1px solid #ccc; border-top: 0;}
.searchitem:hover {}
.searchitem a {}
.searchattribute {float: right;}
/* MENU */
#menu {float: right; position: relative;}
#menu > div {height: 43px; float: right; background-repeat: no-repeat; background-position: center; padding: 0 6px;}
#menu > div:hover {background-color: #323232;}
#user {background: url(http://www.axive.it/axive2/images/user.png); width: 28px;}
#help {background: url(http://www.axive.it/axive2/images/help.png); width: 28px;}
#nav {background: url(http://www.axive.it/axive2/images/nav.png); width: 30px;}
#add {background: url(http://www.axive.it/axive2/images/plus.png); width: 30px;}
#home {background: url(http://www.axive.it/axive2/images/home.png); width: 30px;}
#cloud {background: url(http://www.axive.it/axive2/images/cloud.png); width: 40px;}

Il logo deve essere allineato a sinistra, il menù a destra. In mezzo l'input deve prendere tutto lo spazio disponibile in base alla risoluzione. Se metto 100% al div che contiene l'input, il div esce dal float. Utilizzare le tabelle mi scocciava onestamente.
E' proprio per rendere il sito responsive che sto facendo così, altrimenti devo limitare la larghezza dell'input ad un valore accettabilmente basso.

[Floyd611]

ciao,

appena posso oggi pomeriggio ti posto il codice.
Adesso sono da cellulare...

saluti

[fluxKami]

Ti ringrazio, ho risolto trasformandolo in un BFC tramite la proprietà overflow.