PB de div à largeur variable

Bonjour,

Je suis face a un problème depuis un moment :

J'ai 2 div (bouton) à largeur variable en fonction de leur contenu qui encadrent un input text. J'aimerais que le input prenne la taille entre les 2 div
La div de gauche est positionné a gauche en float left, celle de droite a droite en float right. la taille du conteneur principal ne peut pas changer.. voila une image pour vous schématiser le soucis.

http://gandoulfe.free.fr/test/soucis-css.png

J'aimerais bien sur que ça soit compatible :evilred: ie6 :evilred:

Bonjour,

Qu'en est-il de la hauteur des trois blocs ? Est-elle identique ? Est-elle fixe ?

pour la hauteur, pour le moment elle est fixe.

Salut,

Quand est-il de la largeur de ton input ? Est-il en auto ou en défini?

Justement le input doit prendre une largeur variable selon les taille des 2 boutons.

As-tu le code HTML ainsi que la feuille CSS associée ? Ça aidera fortement à répondre à ta question.

Merci ;)

Voila mon code associé :

html :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div class="formSearch">
			<div class="searchBtn">
                            <ul class="select">
                                <li class="selected"><a href="#" class="" ><span>Everything</span></a></li>
                                <li class="hidden"><a href="#" class="" ><span>Artist</span></a></li>
                                <li class="hidden"><a href="#" class="" ><span>Song</span></a></li>
                                <li class="hidden"><a href="#" class="" ><span>Album</span></a></li>
                            </ul>         
                        </div>
                        <div class="inputBG">
                          <div class="leftSide"></div>
                          <div class="rightSide"><input class="searchInput" type="text" value=""/></div>  
                        </div>
                        <div class="searchSubmit">
                            <div class="leftSide"></div>
                            <div class="rightSide"><input class="searchSubmit" type="button" value="search" alt="search"/></div>
                        </div> 
                    </div>

CSS

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
div#mainColumn #searchBox .formSearch{
	width:456px;height:33px;}
div#mainColumn #searchBox ul li{
	list-style-type:none;}
div#mainColumn #searchBox .inputBG{
	float:left;
	height:31px;
	margin-left:10px;
	width:226px;}
div#mainColumn #searchBox .inputBG .leftSide{
	background:transparent url(img/inputBgleft.png) no-repeat scroll left top;
	display:block;
	float:left;
	height:31px;
	width:7px;}
div#mainColumn #searchBox .inputBG .rightSide{
	background:transparent url(img/inputBg.png) no-repeat scroll right top;
	float:left;
	height:31px;
	padding-right:10px;}
div#mainColumn #searchBox .searchInput{
	border:0 none;
	float:left;
	height:18px;
	margin:6px 0 0 0;
	padding:0;}
div#mainColumn #searchBox .searchSubmit{
	float:right;
	height:22px;
	margin:2px 3px 0 0;
	padding:0 0 4px;}
div#mainColumn #searchBox .searchSubmit .leftSide{
	background:url(img/filterButton-left.png) no-repeat scroll left top;
	display:block;
	float:left;
	height:31px;
	width:5px;}
div#mainColumn #searchBox .searchSubmit .rightSide{
	background:url(img/searchSubmit.png) no-repeat right top;
	float:left;
	height:31px;
	padding:0 3px 0 0;
	margin:0;}
div#mainColumn #searchBox .searchSubmit .rightSide input{
	border:0 none; 
	background:none;
	color:#FF5500;
	cursor:pointer;
	display:block;
	line-height:27px;
	padding:0px;
	width:auto;}