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;
}

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,

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 ....

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

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%

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.