3 divs, middle div needs to be a variable length dotted line

Question

Example DIV layout

I would like to create a restaurant style menu card.

I do not want to use tables. I'm trying to accomplish this using DIVs only.

This is what I have:

.review-row {  // (1)
    padding: 0;
}

.review-cat {  // (2)
    font-size: 25px;
    float: left;
}

.review-dots {  // (3)
    padding-bottom: 5px;
    float: left;
}

.review-dots-inner {  // (3)
    height: 5px;
    border-bottom: 3px dotted #E65540;
}

.review-rating {  // (4)
    float: right;
    font-size: 50px;
}

In the image think of (3) as being 2 DIVS, the inner div is there to get the dots on the same baseline as the text.

Now this doesn't work. How to proceed?

All DIVs should adjust width according to content
Middle DIV needs to act as a 'filler'

Duplicate http://stackoverflow.com/questions/4898287/how-to-display-text-a-dotted-line-then-more-text-spanning-the-width-of-the-page — Sotiris, Feb 12 '11 at 14:37
Possible duplicate of [Create leading dots in CSS](https://stackoverflow.com/questions/2508732/create-leading-dots-in-css) — KyleMit, Sep 04 '19 at 21:33

score 2 · Answer 1 · answered Mar 05 '18 at 05:36

Easy with Flexbox :) . See working example here..

<div class="row">
  <div class="text-box">Breakfast</div>
  <div class="dots-box"></div>
  <div class="text-box">8:30 am - 9:30 am</div>
</div>

CSS

.row{
  display: flex;
  overflow:hidden;
  padding:15px;
  width:90%;
}
.text-box{
  flex: 0 0 auto;
}
.dots-box{
  flex: 1 1 auto;
  position: relative;
}
.dots-box:before{
  position:absolute;
  bottom: 5px;
  width: 94%;
  border-bottom: 1px dotted #000;
  content: '';
  left: 3%;
}

score 2 · Answer 2 · answered Feb 12 '11 at 13:10

You don't need images.. See working example here..

do the following..

 <!--Markup and styles-->
<div class="item-container">
    <span class="item">Quality</span>
    <span class="fill"></span>
    <span class="score">8.0</span>
</div>
<div class="item-container">
    <span class="item">Presentation</span>
    <span class="fill"></span>
    <span class="score">9.5</span>
</div>
<style>
    .item-container{
    width:200px;
    /*border:1px solid #AAA;*/
    display:block;
    padding:5px;
    margin:2px;    
}

.item{
    float:left;   
    margin:2px; 
}
.score{
    float:right;
    margin:2px;
}
.fill{
    border:none;
    border-bottom:1px dotted #000;
    display:inline-block;
}
</style>

And do this in your $().ready()

$('.item-container').each(function(){
    //alert($('.fill', $(this)).width());
    var item = $('.item', $(this));
    var score = $('.score', $(this));
    var itemWidth = item.width();
    var scoreWidth = score.width();

    var offset1 = item.offset().left;
    var offset2 = score.offset().left;
    var fillerWidth = (offset2 - offset1) - (itemWidth + scoreWidth);

    $('.fill', $(this)).css('width', fillerWidth + 10);
});

Very cool! Canyou see if you could fix it so that I can use font-size: 50px for .score and font-size: 25px for .item? Right now if I change to those values the thing is messed up. — Fred Fickleberry III, Feb 12 '11 at 14:36
@Frankie: I personally suggest using em's.. I have changed css accordingly. Please feel free to tweak the `font-size` and `line-height`. Here it is with updated styles. http://jsfiddle.net/KCwFT/17/ — Robin Maben, Feb 14 '11 at 19:57

score 0 · Answer 3 · answered Feb 12 '11 at 12:40

0

You could set the dots as a repeating background, then add a white (or whatever) background for .review-cat and .review-rating.

This way you can then continue as you are going, float the rating to the right, make sure it is first in the html before (2) which is floated to the left.

background-color: white; is what you'll need to do

and for the .review-row you'll want to add the dots in as a repeating background background: transparent url(../images/dots.png) repeat 0 0;

Good luck

answered Feb 12 '11 at 12:40

Jason

15,064
15
65
105

This won't work, because (a) my background is already a paper texture and (b) I have tried the dots.png image approach, but unfortunately the last dot is cut off. There is no way to always ensure that the last dot is shown in its entirety. – Fred Fickleberry III Feb 12 '11 at 12:47

3 divs, middle div needs to be a variable length dotted line

3 Answers3