How to float a div between 2 div's

[pancgom29p]

I have 2 div's in between which there is another div which have to fit itself to the full width between the div's.

That is i have a left float div1 ...then there is another div2 .... followed by another div 3 all in the same line and float next to each other... div2 has to float all the way from div1 to div3.

The problem i have is when i do div2 - width:100% , div 3 gets pushed to the next line. how do i solve this.

HTML

<div class="subSectionTitlesRed">
                        	  <h1>food</h1>
                        	</div>
                            <div class="RSS"><img height="18" width="19" alt="Today Online RSS" src="images/rss.gif"/></div>
                            <div class="livingHolder">Living</div>

CSS

.subSectionTitlesRed {
color:#FF0000;
display:block;
float:left;
font-style:normal;
padding:5px;
width:auto;
}


h1 {
font-family:Verdana,Arial,Helvetica,sans-serif;
font-size:0.88em;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:bolder;
line-height:normal;
margin:0;
text-transform:uppercase;
}

.RSS {
display:block;
float:right;
height:16px;
padding-bottom:6px;
padding-right:5px;
padding-top:5px;
position:static;
width:19px;
}

.livingHolder {
background-color:#FF9900;
background-image:url(../images/newImages/livingCut.gif);
background-position:left center;
background-repeat:no-repeat;
color:#FFFFFF;
display:inline-block;
float:right;
font-family:Verdana,Arial,Helvetica,sans-serif;
font-size:0.75em;
font-weight:bold;
height:16px;
margin:6px 0 0;
padding:0;
text-align:left;
text-transform:uppercase;
width:auto;
}

[essential]

Hi,

use another div and hold the 3 divs inside it.

e.g.

<div id="hold" style="width : auto; border : none; background-color : transparent;">
<div id="divLeft" style="width : 30%; float : left; clear : left; background-color : #000;">LEFT</div>
<div id="divMid" style="width : 40%; float : left; clear : none; background-color : #fff;">CENTER</div>
<div id="divRight" style="width : 30%; float : right; clear : right; background-color : #000;">RIGHT</div>
</div>

[pancgom29p]

Hi,

use another div and hold the 3 divs inside it.

e.g.

<div id="hold" style="width : auto; border : none; background-color : transparent;">
<div id="divLeft" style="width : 30%; float : left; clear : left; background-color : #000;">LEFT</div>
<div id="divMid" style="width : 40%; float : left; clear : none; background-color : #fff;">CENTER</div>
<div id="divRight" style="width : 30%; float : right; clear : right; background-color : #000;">RIGHT</div>
</div>

hi... thanks... but the divLeft is not fixed is can increase in width or decrease... so divMid has to be auto... only divRight is fixed ....

[ko ko]

Hi!
Are you want to float div2 without exact width.
Any float elements need exact width.

[stevenpetersen]

I would style the divs to a % and then set the images in the html to %

#div name
{
border-width:0 0pt 0pt 0pt;
height: 30%;
width: 50%;
margin: 0 auto;
}

#div name
{
border-width:0 0pt 0pt 0pt;
height: 30%;
width: 50%;
margin: 0 auto;
}

then in the html set your Images to 100%