Question

I have 3 floated left objects, the one on the left will change in size all the time. The right on will always be fixed in size. The center one I want to fill up the space between the two outer divs. Right now that’s not working though. If I set the width of the center div to 100% it gets way too big.

Not sure how this should be handled.

edit: code sample

<div style="width:1000px">
  <div style="float:left;">1</div>
  <div style="float:left;">Lots of text in here that can be any size....</div>
  <div style="float:left; width:100px;">Date/Time</div>
</div>

The first div is dynamic in size. If the number is 10 it’s going to take up more space than the number 1. The second div will be dynamic as well, I want that to take up whatever space isn’t take up by the first and third div.

Answer 1

HTML

<div style="width:1000px">
  <div id="left">1</div>
  <div id="right">Date/Time</div>
  <div id="center">Lots of text in here that can be any size....</div>
</div>

CSS

#left {
    float: left;   
    width: 20%;
}

#center {
    margin-left: 20%;
    margin-right: 100px;
}

#right {
    float: right;
    width: 100px;   
}

See fiddle.