HTML layout with flexible div

Question

Is it possible to create markup as shown below?

Sample 1..................Right 1
Text2.....................Right Text 2
Another Text3.............Right 3

So far, I:

HTML:

<div class="left-most-div">Sample 1</div>
<div class="center-div">&nbsp;</div>
<div class="right-most-div">Right 1</div>
<div class="clear"></div>
<div class="left-most-div">Text2</div>
<div class="center-div">&nbsp;</div>
<div class="right-most-div">Right Text2</div>
<div class="clear"></div>
<div class="left-most-div">Another Text 3</div>
<div class="center-div">&nbsp;</div>
<div class="right-most-div">Right 3</div>

CSS

.center_div { 
  border-bottom: 1px dotted #aaa; 
}
.clear { 
  clear:both; 
}

The center div has a flexible length, adjustable based on the size of the leftmost div. The right side of the div has a fixed left edge.

Answer 1

custom div center for left div content

what you ask is the variable div left ,

div, adjustable for the remaining space, and the right div, here is what I suggest:

fiddle

<div class="left-col">
  <div class="left-text">this is your text</div>
  <div class="dotted"></div>
</div>
<div class="right-col">this is right fixed</div>
<div class="clearer"></div>

<div class="left-col">
  <div class="left-text">this is </div>
  <div class="dotted"></div>
</div>
<div class="right-col">this </div>
<div class="clearer"></div>

<div class="left-col">
  <div class="left-text"> is your text</div>
  <div class="dotted"></div>
</div>
<div class="right-col">this is right fixed</div>
<div class="clearer"></div>

and css:

.left-col{
  width:200px;
}
.left-col,
.right-col{
  float:left;
}
.left-text,
.dotted{
    display:table-cell;
}
.left-text{
    width: 1%;
    white-space: nowrap;
}
.dotted{
    border-bottom:1px dotted black;
}
.clearer{
    clear:both;
}

EDIT : cleaner html:

fiddle

Answer 2

Yes, use this:

<div class="float-left">Left</div>
<div class="float-center">Center</div>
<div class="float-right">Right</div>

For CSS

.float-right {
  text-align: left; // here is the trick :)
}

, div, , , ! , .

.float-center, .float-left, .float-right {
   display: inline-block; // to show them inline..
}

, .

, http://jsfiddle.net/afzaal_ahmad_zeeshan/cf3gD/1/ !:) Right.

Answer 3

- ?

http://jsfiddle.net/S2A9c/1/

display table-cell

HTML

<div class="table">
    <div class="float-left td">Left</div>
    <div class="float-center td">Center</div>
    <div class="float-right td">Right</div>
</div>

CSS

.table {
    display: table;
    width: 100%;
}
.td {
    display: table-cell;
}
.float-left {
    width: 100px;
    background: green;
}
.float-right {
    width: 200px;
    background: blue;
}

divs, , . , / divs