Member Avatar for 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;
}
  • 4 Contributors
  • 4 Replies
  • 1K Views
  • 4 Days Discussion Span
  • Latest Post Latest Post by stevenpetersen

Dani AI

Generated

Short answer: make the three elements direct children of a single row and let modern layout handle the math. That removes the need to guess widths. already has a left (variable), a small fixed right, and a middle that must take remaining space — Flexbox solves that cleanly and without floats.

Example (flexbox)

<div class="row">
  <div class="left">…</div>
  <div class="middle">…</div>
  <div class="right">…</div>
</div>

.row { display: flex; align-items: center; }
.left { flex: 0 1 auto; }       /* content-sized, can grow/shrink */
.middle { flex: 1 1 auto; min-width: 0; } /* fills remaining space */
.right { flex: 0 0 60px; }     /* fixed slot for RSS/icon */

This keeps the right column fixed and the middle fluid; min-width: 0 prevents long unbreakable children from forcing overflow. Flexbox guidance and examples are in the linked reference. (css-tricks.com)

If legacy support is required, a float/margin fallback works (wrap the three in a container and reserve the right-column width with a margin on the middle). That approach is what many classic layouts use when flexbox is not available. Example fallback pattern:

.container { overflow: hidden; /* creates BFC */ }
.right { float: right; width: 60px; }
.middle { margin-right: 60px; overflow: hidden; } /* occupies remaining space */

This ties back to s suggestion to wrap the three elements and to 's point about float-based layouts needing a predictable slot. (stackoverflow.com)

Troubleshooting notes: set box-sizing: border-box to keep padding inside widths; add word-break or overflow rules if inline content is preventing shrink; use align-items for vertical centering. For projects that must support old IE, add a float/absolute fallback or use an autoprefixer build step—Flexbox is widely supported in modern browsers. (developer.mozilla.org)

Recommended Answers

All 4 Replies

Member Avatar for 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>
Member Avatar for 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 ....

Member Avatar for ko ko

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

Member Avatar for 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%

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.