Flexible vs Static Values

I was going off Rons code from post 8 - I had assumed you used his.

[OT] @RyanReese ;
I was going off Rons code from post 8 - I had assumed you used his.

For the benefit of others and especially myself…
I am curious to know the problems and also any improvements that could be made to the following solution:

http://www.johns-jokes.com/downloads/sp-c/debbie-flexible-vs-static-values/index-john-001.php

[/OT]

:rofl: That is just too funny :lol:

Personally, I do not see any problems with John’s presentation. He is using inline-blocks whereas I opted for table-cells. Different strokes. In Debbie’s application, both the inline-block and display:table techniques can achieve the same results with the same HTML and practically the same number of lines of CSS.

Although there may be practical reasons for choosing one method over the other, it seems to me that the most significant choice is about coder’s preference. When using inline-blocks, one must negate the white space between them in order to use percent widths effectively. White space is not an issue with table-cells.

I concentrated primarily on 2 design behaviors: (1) the 3 “columns” of data should remain in their positions as the width of the viewport narrows (or the font size is increased) and, (2) with the aid of a 2-property media query, change to a block of three lines at the narrowest widths assuming the site is responsive (which may be a future consideration).

The following screen shots show the display at different widths and font sizes: (1) the top 4 become progressively narrower, (2) the font in the bottom 1 has been enlarged significantly. Note the behavior of the 3 “columns” in each of these.

BTW - I changed the width of the table from my previous post:
from


.trow { 
    display:table;
    table-layout:fixed;
    [color="red"]width:80%;[/color]

to


.trow { 
    display:table;
    table-layout:fixed;
   [color="blue"] width:100%;
    max-width:800px;[/color]

Hope this helps.

Hi John, going off of Debbies concerns, that solution seems to do just fine. I removed some of the money values to have it collapse but your min-width on the span makes it so it doesn’t.

I personally don’t see anything wrong with this setup but I’m no expert.

@ronpat ;

I implemented your CSS table thingy, and it works really well - at least on FF, Chrome, Safari, and Netscape on my Mac.

Thanks to you and @RyanReese ; for the suggestions!

BTW, what about using DT and DD for this problem?

Semantically, that seems better suited, although from a layout standpoint - which was my primary goal - I’m not sure if that is the right approach to use here? :-/

Just curious.

Sincerely,

Debbie

That’s a good start :slight_smile:

I considered using DL tags before posting, but they seemed less semantically appropriate to me so I dismissed them. The tags could certainly be coded to work, but what would be gained? IMO, the current tags are more straight-forward.

Keep truckin’ :slight_smile:

[ot]@RyanReese; Post #24

Many thanks for taking the time to respond and delighted to find that you do not find any problems with the design.

You are being modest with your personal expertise summation :slight_smile:
[/ot]

[ot]@ronpat; Post #23

I am also pleased that you found no problems.

Your Responsive Design approach was an excellent finishing touch. To achieve similar effects the min-width value was a trial and error approach and I will definitely keep your technique in mind when developing.

I must confess, my primary concern, was to produce a flexible technique that I could personally implement. Calling display functions with an array of Database SQL table variables really reduces code bloat and also far easier to standardise the look and feel of sites.

I have modified the online version with your CSS .trow {…} changes.
[/ot]

Hi, John.

Just for completeness, this is a working page that includes the media query that puts the content on three lines at the narrowest width.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{display:table}</title>
<!--
http://www.sitepoint.com/forums/showthread.php?1229279-Flexible-vs-Static-Values
2014.08.18 11:29
DoubleDee
-->
    <style type="text/css">
.outer {
    width:80%;  /* if needed */
    font-size:90%;  /* for this demo only */
    margin:0 auto;  /* if needed */
}
.trow { 
    display:table;
    table-layout:fixed;
    width:100%;
    max-width:800px;
    border-spacing:0;
    outline:1px dotted #888;  /* TEST Outline */
}
.trow > div {
    display:table-cell;
    vertical-align:top;
    font-weight:bold;
    font-family:Arial,sans-serif;
    padding:.25em 0;
}
.tcell1 {width:35%;}
.tcell2 {width:40%;}
.tcell3 {width:25%;}
.trow span {
    display:inline-block;
    vertical-align:baseline;
    font-weight:normal;
    font-family:"courier new",monospace;
    padding-left:.5em;
}
.trow > div > span {font-size:1.125em;}

p {
    color:#888;
    line-height:1.4;
    margin:.5em 0;
}
@media screen and (max-width:450px) {
    .trow > div {
        display:block;
        width:auto;
    }
}
    </style>
</head>
<body>

<div class="outer">
    <div class="trow rowTwo">
        <div class="tcell1 accountStats">Deposits:<span>$2,511<span class='pct'>(33.9%)</span></span></div>
        <div class="tcell2 accountStats">Withdrawals:<span>$1,059<span class='pct'>(14.3%)</span></span></div>
        <div class="tcell3 accountStats">Balance:<span>$7,394</span></div>
    </div>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas accumsan non dui ut congue. Curabitur vulputate sodales semper. Duis ultricies sapien eget interdum sollicitudin. Cras nunc nulla, porta quis mauris quis, tempus malesuada enim. Vivamus consequat in sem quis iaculis. Integer sollicitudin, nisi et porttitor convallis, tellus est volutpat justo, ac posuere purus tellus ac elit. Praesent lorem justo, mollis sit amet</p>
    <div class="trow rowTwo">
        <div class="tcell1 accountStats">Deposits:<span>$22,511<span class='pct'>(33.9%)</span></span></div>
        <div class="tcell2 accountStats">Withdrawals:<span>$11,059<span class='pct'>(14.3%)</span></span></div>
        <div class="tcell3 accountStats">Balance:<span>$77,394</span></div>
    </div>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas accumsan non dui ut congue. Curabitur vulputate sodales semper. Duis ultricies sapien eget interdum sollicitudin. Cras nunc nulla, porta quis mauris quis, tempus malesuada enim. Vivamus consequat in sem quis iaculis. Integer sollicitudin, nisi et porttitor convallis, tellus est volutpat justo, ac posuere purus tellus ac elit. Praesent lorem justo, mollis sit amet</p>
    <div class="trow rowTwo">
        <div class="tcell1 accountStats">Deposits:<span>$222,511<span class='pct'>(33.9%)</span></span></div>
        <div class="tcell2 accountStats">Withdrawals:<span>$111,059<span class='pct'>(14.3%)</span></span></div>
        <div class="tcell3 accountStats">Balance:<span>$777,394</span></div>
    </div>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas accumsan non dui ut congue. Curabitur vulputate sodales semper. Duis ultricies sapien eget interdum sollicitudin. Cras nunc nulla, porta quis mauris quis, tempus malesuada enim. Vivamus consequat in sem quis iaculis. Integer sollicitudin, nisi et porttitor convallis, tellus est volutpat justo, ac posuere purus tellus ac elit. Praesent lorem justo, mollis sit amet</p>
    <div class="trow rowTwo">
        <div class="tcell1 accountStats">Deposits:<span>$2,511<span class='pct'>(33.9%)</span></span></div>
        <div class="tcell2 accountStats">Withdrawals:<span>$11,059<span class='pct'>(14.3%)</span></span></div>
        <div class="tcell3 accountStats">Balance:<span>$777,394</span></div>
    </div>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas accumsan non dui ut congue. Curabitur vulputate sodales semper. Duis ultricies sapien eget interdum sollicitudin. Cras nunc nulla, porta quis mauris quis, tempus malesuada enim. Vivamus consequat in sem quis iaculis. Integer sollicitudin, nisi et porttitor convallis, tellus est volutpat justo, ac posuere purus tellus ac elit. Praesent lorem justo, mollis sit amet</p>
    <div class="trow rowTwo">
        <div class="tcell1 accountStats">Deposits:<span>$222,511<span class='pct'>(33.9%)</span></span></div>
        <div class="tcell2 accountStats">Withdrawals:<span>$11,059<span class='pct'>(14.3%)</span></span></div>
        <div class="tcell3 accountStats">Balance:<span>$7,394</span></div>
    </div>
</div>

</body>
</html>


Hi Ron,

Just updated your online version.