css variable-width issues with a mock LCARS (Star Trek) just-for-fun site

Question

Just to keep my front-end web dev skills current, I decided to create a "sandbox/playpen" website based on the the fictional LCARS user interface familiar to fans of Star Trek. Here's the link.

http://www.king-con.com/sto/console/

If you take a look, you may notice that the some of the sub sections (views) have trek-ish looking headers, the basic HTML for which is:

<div style="display:table;width:100%">
<div style="display:table-row;">

    <div style="display:table-cell;width:15px;background-color:somecolor;border-radius:10px;">FIXED WIDTH (15px)</div>

    <div style="display:table-cell;">WIDTH VARIES WITH HEADER TEXT</div>

    <div style="display:table-cell;background-color:somecolor;border-radius:10px;>WIDTH EXPANDS TO FILL REMAINING SPACE</div>

</div>

ATM, I'm using a server-side function to write out those headers. It simply takes one argument (the text) and writes out the HTML based on the character length of the text.

You may also notice it isn't really working, that is it doesn't do a very precise job of guesstimating the actual pixel-width of the header text, and sizing the divs accordingly.

I'm wondering if there isn't a client-side, perhaps jquery-based method for precisely guaging the pixel-width of the various header captions.

Thanks in advance for any ideas.

score 1 · Accepted Answer · edited May 23 '17 at 12:28

I believe your best bet is to do all of the styling client side with CSS rather than trying to calculate the text width on the server.

HTML:

<div class="container">
   <span class="fixed">FIXED WIDTH (110px)</span>
   <div class="varies">WIDTH VARIES WITH HEADER TEXT</div>
   <div class="right">WIDTH EXPANDS TO FILL REMAINING SPACE</div>
</div>

CSS:

.container {
    overflow: hidden; /* clear the float */

}
.fixed {
    height: 50px;
    width: 110px;
    vertical-align:middle;
    float: left;
    border-radius:10px;
    background-color:red;
}
.varies {
    height: 50px;
    float: left;
    border-radius:10px;
    background-color:green;
}

.right {
    height: 50px;
    overflow: hidden;
    background-color: blue;
    border-radius:10px;
}

Based on this answer: How to make an inline-block element fill the remainder of the line?

Fiddle Here: http://jsfiddle.net/YRDCF/

Thanks very much! That's a simple, concise solution. Heh, serves me right for forgetting what a straight up, plain-old div actually does by default. I guess I've started to overuse the newer "display:table, etc." type markup. Thanks again for the response. — Leathan Lund, Apr 25 '13 at 04:05

css variable-width issues with a mock LCARS (Star Trek) just-for-fun site

1 Answers1