I changed the code to…
.outerwrap {
position: relative;
padding: 20%;
}
…was sort of coming to what you said.
(I hope we can agree all of this is super counter-intuitive?!)
So, it sounds like padding-top:20% in essence sets the height of .outerwrap, and then .wrapper is placed on top of the padding - instead of below it like you’d expect with a “non-positioned” element, right?
No, it isn’t. It’s just a new concept for you along with several new rules of CSS behavior.
<restated>
change “non-positioned” to “position:static” and you’ll be speaking golden CSS.
Yes!
FWIW, position:static is a “non-positioned” element versus things like position:relative/absolute/fixed which are “positioned” elements.
What changes to your code do I need to make if I want to adjust the padding on each box yet keep it square?
I added…
a { padding: 1em }
…and now I have a vertical rectangle.
Sorry to be slow getting back to you… was sleeping
You’ve probably figured this out for yourself by now, but here goes…
GIVEN: The code that I sent uses the box-sizing:border-box property. That property mimics the “Microsoft box model” in that padding and borders are included in the width declaration of the box (instead of being separate per the standard CSS box model).
GIVEN: In the original code that I sent, the blue background color is applied to .wrapper. Maybe not the best place for it on a finished page, but great for a page under development. Why? Move it from .nav to .wrapper (or .outerwrap) and see for yourself. .wrapper is the absolutely positioned box in which the table is supposed to fit. But what happens when you apply too much content inside of a fixed width box? The box extends vertically, overflowing its parent container, to hold that content (you can see the table extend below the blue background). In that way, the table is extending vertically (and overflowing .wrapper) to hold the text content. Tables are very good about that.
HOW TO FIX: Extend the width of .outermost so the table and its new content can fit within .wrapper. Change .outermost .width:52em to something wider (whatever you need to prevent the table from overflowing its container) plus a couple of extra em to allow for differences between fonts on different platforms. (Not too tight, in other words.) You will also need to change the width of the media query respectively.
Hope this helps.
I think the conversation broke down with my absence and yours.
I have been playing around with the code you gave me, and below is my best attempt to understand and improve it.
A few comments…
1.) I did not see any value provided by using .outerwrap and .wrapper. Please see if you can break my streamlined code.
2.) I changed the logic of the code and have three sections: styles for all, styles for mobile, and styles for desktop. (Notice desktop comes last.)
3.) I forgot if I was able to fix the padding issue… 
4.) This whole “Our Services” thing would ultimately just be a portion of my entire home page.
Let me know what you think of this code…
<!doctype html>
<html lang="en">
<head>
<title>Our Services</title>
<!-- HTML Metadata -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Page Stylesheets -->
<style type="text/css">
/* Basic CSS Reset */
/*****************************************/
html, body, address, blockquote, div,
form, fieldset, caption,
h1, h2, h3, h4, h5, h6,
hr, ul, li, ol, ul, dl, dt, dd, br,
table, tr, td, th, p, img{
margin: 0;
padding: 0;
}
header, footer, nav, section, article, aside{
display: block;
}
body{
font-family: Helvetica, Arial, Sans-Serif;
font-weight: normal;
font-size: 0.9em;
line-height: 1.4;
color: #000;
background: #FFF;
}
/* Services (general) */
/*****************************************/
nav{
background-color: #bdf;
}
a{
color: inherit;
line-height: 1.2;
text-decoration: none;
text-align: left;
border: 1px solid #854;
}
a:hover{
color: #00F;
}
span{
padding: 0 0 0.25em 0;
font-weight: bold;
font-size: 1.2em;
}
/* Services (mobile) */
/*****************************************/
@media screen and (max-width: 53em){
.outermost{
width: auto;
}
nav,
a,
span{
display: block;
width: auto;
height: auto;
}
a{
padding: 0.5em 0 1em 0.8em;
}
a+a{
border-top: 0;
}
}
/* Services (desktop) */
/*****************************************/
@media screen and (min-width: 53em){
.outermost{
width: 52em;
margin: 0 auto;
}
nav{
display: table;
table-layout: fixed; /* Equal-width Boxes. */
border-collapse: collapse;
width: 100%;
height: 100%;
}
a{
display: table-cell;
padding: 0.5em 0.8em 1em 0.8em;
vertical-align: top;
}
span{
display: table-cell;
width: 1%; /* Use available space. */
height: 2.4em; /* Allow for wrapping heading. */
text-align: center;
vertical-align: bottom;
}
}
</style>
</head>
<body>
<div class="outermost">
<div class="outerwrap">
<div class="wrapper">
<nav>
<a href="#go1">
<span>Responsive Design</span>
Lorem imsum dolor sit amet, consectetur adipiscing elit. Donec lictus nulla, scelerisque id augue in, maximus mollis erat.
</a>
<a href="#go2">
<span>Mobile</span>
Lorem imsum dolor sit amet, consectetur adipiscing elit. Donec lictus nulla, scelerisque id augue in, maximus mollis erat.
</a>
<a href="#go3">
<span>SEO</span>
Lorem imsum dolor sit amet, consectetur adipiscing elit. Donec lictus nulla, scelerisque id augue in, maximus mollis erat.
</a>
<a href="#go4">
<span>Programming</span>
Lorem imsum dolor sit amet, consectetur adipiscing elit. Donec lictus nulla, scelerisque id augue in, maximus mollis erat.
</a>
<a href="#go5">
<span>Business Development</span>
Lorem imsum dolor sit amet, consectetur adipiscing elit. Donec lictus nulla, scelerisque id augue in, maximus mollis erat.
</a>
</nav>
</div>
</div>
</div>
</body>
</html>
???
This is what I see in Firefox.
It looks like your requirements have changed.
The drum was beating rather loudly for square boxes. As long as rectangular boxes are acceptable, I’d say you are good to go. In fact, you can streamline the code quite a bit more by removing the unneeded elements, .outermost .outerwrap and .wrapper, deleting from CSS nav {height:100%} and nav,a,span {height:auto } as they serve no purpose, and finally adding nav {max-width:52em;margin:0 auto} (relocated from the departed .outermost). Remember, those outer boxes were added to support your requirement for square boxes. Unordered List as boxes? - #23 by ronpat
Personally, I think the rectangular boxes are more practical.
To me, that style of segregating CSS into discrete segments by width is confusing and unnecessarily bloaty… not streamlined at all. To each his own, though… if it works for you, go for it!
Looks like it became a non-issue.
You seem to have commented out the css ‘square box technique’ which means that two of your wrappers are now redundant (wrapper and outerwrap).
Erik’s original code gave you a perfect square if content was short but now you just have content height instead.
Otherwise the code is fine.
That code worked, but as the content increased, the square changed to a rectangle. That is why I was uncertain of the value of the two outside wrappers.
Can you explain how works (or is supposed to work)?
This has become a continuation of the “Unordered List as boxes” thread. I am going to recommend that your post be appended to that thread, if possible.
This question specifically and its relationship to the “apparent” rectangular blue boxes, was addressed in this response Unordered List as boxes? - #46 by ronpat. A complete explanation for the outer boxes was detailed earlier.
If you have to hear it expressed yet another way from Paul (because “when Paul speaks, you listen!”), be aware that he is taking some family time this week and will return next week.
When I used your code, I was not getting square boxes - they were rectangular. (I suspect this is because the lorem ipsum content was long enough to force a rectangle?)
That was the point I was trying to make.
If you would like to see my latest code, I can post it.
I agree that rectangle boxes for each service are probably more practical. Was just curious and trying to understand what your code was supposed to do.
This thread is old enough, maybe the conversation has died off? (Have had lots going on in life in the past month!)
You comments above were not necessary.
This is an issue of I am lost in the original conversation - largely because my code has changed so much.
Thanks to everyone’s help, I think I have a nice working responsive design for my boxes. And I am fine with the rectangular shape, although am curious about why they aren’t square since I am pretty sure I am using the original code - albiet reorganized.
Here is my latest code version…
<!doctype html>
<html lang="en">
<head>
<title>Our Services (test2b.php)</title>
<!-- HTML Metadata -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Page Stylesheets -->
<style type="text/css">
/* Basic CSS Reset */
html, body, address, blockquote, p, div,
h1, h2, h3, h4, h5, h6,
ul, ol, li, dl, dt, dd,
table, tr, th, td,
form, fieldset, caption, br, hr, img,
header, footer, nav, section, article, aside{
margin: 0;
padding: 0;
}
header, footer, nav, section, article, aside{
display: block;
}
body{
font-family: Helvetica, Arial, Sans-Serif;
font-weight: normal;
font-size: 0.9em;
line-height: 1.4;
color: #000;
background: #FFF;
}
/* Services (general) */
.outermost{
margin: auto;
padding: 1em 1em 0 0;
}
nav{
background-color: #bdf;
}
a{
padding: 0.5em 0.8em 1em 0.8em;
color: inherit; /* Override (default) blue. */
line-height: 1.2;
text-decoration: none;
text-align: left;
border: 1px solid #854;
}
a:hover{
color: #00F;
}
span{
padding: 0 0 0.25em 0;
font-weight: bold;
font-size: 1.2em;
}
/* Services (mobile) */
@media screen and (max-width: 53em){
.outermost{
width: auto;
}
nav,
a,
span{
display: block;
width: auto;
height: auto;
}
a+a{
border-top: 0;
}
}
/* Services (desktop) */
@media screen and (min-width: 53em){
.outermost{
width: 52em;
}
/******* The following two styles are not giving me square boxes. *******/
/* Creates empty subcontainer with a top padding (height)
of 20% of .outermost container */
.outerwrap{
position: relative; /* Make positioned element. */
padding-top: 20%;
}
/* Creates empty subcontainer stretched to fit .outerwrap container. */
.wrapper{
position: absolute; /* Make positioned element. */
top: 0;
left: 0;
right: 0;
bottom: 0;
}
/************************************************************************/
nav{
display: table;
table-layout: fixed; /* Equal-width boxes. */
border-collapse: collapse;
width: 100%;
height: 100%;
}
a{
display: table-cell;
vertical-align: top;
}
span{
display: table-cell;
width: 1%; /* Use available space. */
height: 2.4em; /* Allow for wrapping heading. */
text-align: center;
vertical-align: bottom;
}
}
</style>
</head>
<body>
<div class="outermost">
<div class="outerwrap">
<div class="wrapper">
<nav>
<a href="#go1">
<span>Responsive Design</span>
Lorem imsum dolor sit amet, consectetur adipiscing elit. Donec lictus nulla, scelerisque id augue in, maximus mollis erat.
</a>
<a href="#go2">
<span>Mobile</span>
Lorem imsum dolor sit amet, consectetur adipiscing elit. Donec lictus nulla, scelerisque id augue in, maximus mollis erat.
</a>
<a href="#go3">
<span>SEO</span>
Lorem imsum dolor sit amet, consectetur adipiscing elit. Donec lictus nulla, scelerisque id augue in, maximus mollis erat.
</a>
<a href="#go4">
<span>Programming</span>
Lorem imsum dolor sit amet, consectetur adipiscing elit. Donec lictus nulla, scelerisque id augue in, maximus mollis erat.
</a>
<a href="#go5">
<span>Business Development</span>
Lorem imsum dolor sit amet, consectetur adipiscing elit. Donec lictus nulla, scelerisque id augue in, maximus mollis erat.
</a>
</nav>
</div><!-- wrapper -->
</div><!-- outerwrap -->
</div><!-- outermost -->
</body>
</html>
Please pay attention.
Yes, you added enough Lorem Ipsum to force the text to overflow the square box design. The table overflowed the outer frame and formed rectangular cells/boxes. But allowing the text to overflow like that was outside of the design intent. The intent was to size the width of the boxes to hold the full amount of text required. That was easily done by changing the width of the .outermost box.
Had you used my code before Erik modified the header, you would have seen square boxes and you could have seen when the contents of the table-cells forced the table to overlfow the framing containers because the blue would not have extended with the text.
You were fooled into thinking that the rectangles were intentional by the blue background color. I had assigned the blue background color to the .wrapper which only extends in proportion to the width of .outer. When the excessive text was added to the table cells (or padding added around the text), you would have seen the table-cell’s borders extend below the bottom of the blue background. Erik_J moved the background color from .wrapper to the table when he was working on his modification of the header thus opening the door for the confusion, because you could no longer tell when the table was overextended.
“My code”, those extra layers of code behind the table, created the 5-to1 foundation for the fluid square boxes that you requested.
See post #21 for the original code plus the follow-up in post #30.
You’re right, it was not.
You mean, “Please get everything I teach you perfect.”
I am learning here…
I did see that, but with all of the new things to learn and all of the changes, it wasn’t obvious what was happening… 
With your hint, I did some additional testing, and now see how that extra code helps create a square when you just have a little text.
And by extending the width of the .outermost box, you enlarge the cells so they can hold even more text.
Right.
I would say that I have a good working model now.
Thanks for all of the help!!
(In usual form, it took me a month to create one part of one page on my new website. Looks like my “go-live” date of March 2017 is on track!!) 
I’ve been cheering for you… getting hoarse, though.
Nobody ever called me “speedy”!! 