How do I make my divs line up, despite different text lengths?

Question

EDITED

Here's my updated question: I've included a link to my site which shows the exact problem here The first box has a title that is short, and therefore doesn't push the the two divs beneath it (location and price) down very far. The second box has a slightly longer title, so it pushes slightly more. The third box has the longest title and pushes more than box 1 and 2.

In this instance, I'd want box #1 and #2 to have "blank space" padded onto their title divs in order to push the location/price divs down lower (like in box #3). This needs to be dynamic, because sometimes box #1 will have the longest title. I thought blank characters might work but apparently not...

Thanks for any help!

BELOW THIS LINE IS OLD My site has a list item which contains an image, and 3 divs (titlebox,locationbox, and pricebox).

The line I'm interested in is titlebox, mainly I'd like like it to always have 40 characters in it. If there's less, I need blank padding added.

I'll post the entire list code below, but here is just the title div:

<div class="titlebox">Exceptional House with a View</div>

This title only has 29 characters, but I want it to be treated as if it has 40. I don't care if there's more than 40, I only need a function to pad the text with blank space until 40 characters.

How is this possible? Thank you!

Here is the entire list item:

<li class="list__item">
            <figure class="list__item__inner">
            <a class="divLink" href="http://www.testsite.com/BEE/info.html">
             <p class="vignette" style="background-image:url(http://www.fakesite.com/image2.jpg)"></p>
             <div class="titlebox">Exceptional House with a View</div>
       <div class="locationbox">BorrisVille</div>
     <div class="pricebox">Asking $349,000</div>
     </a>
</li>

You're probably looking for the CSS setting min-width. Otherwise we get into messy things like "40 characters in which font at which size?" — Skerkles, Jan 14 '15 at 20:11
You cannot do that in CSS. In fact, CSS has no functions, really. It is difficult to see why you would want to pad to a specific width in characters, since the widths of characters vary. Consider reconsidering what you really wish to achieve and formulate the question differently. Perhaps you wish to set a minimum width for an element. But which width? A character is not a suitable measure, unless you are using a monospace font. — Jukka K. Korpela, Jan 14 '15 at 20:35

Porschiey · Answer 1 · 2015-01-14T21:54:52.300

0

Have you considering using the CSS min-width?

<div style="min-width: 200px;"></div>

To answer your question, you could also make a method in Javascript/jQuery, but this looks/feels sloppy:

function maxOut() {
        var spacesNeeded = 40 - $('#myDiv').html().length;
        var spacer = '';
        for (var i = 0; i < spacesNeeded; i++) {
            spacer += '&nbsp;';
        }
        $('#myDiv').append(spacer);
    }

edited Jan 14 '15 at 21:54

answered Jan 14 '15 at 20:09

Porschiey

1,981
2
17
25

This doesn't seem to work. I placed it within script tags within my html and no change. Besides, this method would only act like blank space (which I asked) but this causes the real text to be affected, ie pushed over and squished. I don't want that. Thanks anyways – Nova Jan 15 '15 at 17:04
@Nova - Well, I don't really recommend using that method. Perhaps you could post a jsfiddle (jsfiddle.com) of the current issue and someone here can help adjust to what you're looking for? – Porschiey Jan 15 '15 at 17:28

How do I make my divs line up, despite different text lengths?

1 Answers1