Whichever produces the result I want better across the browsers I want to support. 
1 Like
Well, the 5 horizontal boxes are for desktops. For mobile, I need to change things to a more traditional vertical unordered list like this…
That being said, would you use floats, display: table, or something else to switch from one style to the other?
P.S. In my table in above, there would be a short description of each service as well.
Can it be done? Yes.
Is it practical?
Working page. You know what to do with it.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>template</title>
<!--
-->
<style type="text/css">
.outermost {
min-width:50em;
margin:0 auto;
}
.outerwrap {
position:relative;
padding-top:20%;
}
.wrapper {
background-color:#bdf;
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
}
ul {
list-style:none;
display:table;
table-layout:fixed;
border-collapse:collapse;
width:100%;
height:100%;
padding:0;
margin:0;
}
li {
display:table-cell;
vertical-align:middle;
text-align:center;
font-family:Arial,sans-serif;
font-weight:bold;
border:1px solid #854;
}
span {
display:block;
font-size:.9em;
font-weight:normal;
}
@media screen and (max-width:51em) {
.outermost {min-width:auto;}
.outerwrap {padding-top:0;}
.wrapper {position:static;}
ul {display:block;}
li {
display:block;
text-align:left;
padding:.5em;
}
}
</style>
</head>
<body>
<div class="outermost">
<div class="outerwrap">
<div class="wrapper">
<ul>
<li>Responsive Design
<span>Lorem imsum dolor sit amet, consectetur adipiscing elit. Donec lictus nulla, scelerisque id augue in, maximus mollis erat.</span>
</li>
<li>Mobile
<span>Lorem imsum dolor sit amet, consectetur adipiscing elit. Donec lictus nulla, scelerisque id augue in, maximus mollis erat.</span>
</li>
<li>SEO
<span>Lorem imsum dolor sit amet, consectetur adipiscing elit. Donec lictus nulla, scelerisque id augue in, maximus mollis erat.</span>
</li>
<li>Programming
<span>Lorem imsum dolor sit amet, consectetur adipiscing elit. Donec lictus nulla, scelerisque id augue in, maximus mollis erat.</span>
</li>
<li>Business Development
<span>Lorem imsum dolor sit amet, consectetur adipiscing elit. Donec lictus nulla, scelerisque id augue in, maximus mollis erat.</span>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
1 Like
I don’t understand why you wrote all of that code. (Also don’t understand a lot of your choices in the code.)
All I was asking is whether one of @cpradio’s approaches (e.g. floats vs display:table) was better for the two layouts I want.
You’re welcome
3 Likes
Well, I ran it, and it looks okay, but it doesn’t answer the question I asked before you wrote it.
Am I missing something?
My apologies - I see what you did now!
I am new to responsive design, and when I ran your code, it never occurred to me to resize the window.
For some reason, NetBeans loads FireFox when I run a script, and I now use Chrome. Since I don’t know how to check a web page for different devices in FireBug, it never occurred to me to do that with your code.
Good for you. I thought a working page might help answer some of your questions and maybe raise a few new ones.
Thanks for going above and beyond the call of duty.
I have to get ready for bed, but I will review your code and am sure I will have lots of questions whenever I can get back to you.
Thanks! 
A brief follow-up.
After a little more experimenting, I changed .outermost {min-width:50em} to 52em,
and the max-width of the media query from 51em to 53em. Those values allow a little more leeway for platform differences.
I doubt that the enlarging square boxes are very appealing on wide screens. They sorta leave the text in the middle and looking small.
That behavior can be changed so the boxes remain at their designated size once the page exceeds a certain width. Just change the following two properties:
.outermost {
min-width:52em; /* DELETE Me */
width:52em; /* ADD Me */
}
@media screen and (max-width:53em) {
.outermost {min-width:auto;} /* DELETE Me */
.outermost {width:auto;} /* ADD Me */
The page is still responds to the media query nicely as the width of the device (desktop browser window) changes and the square boxes seem more practical to me. Whichever you prefer, you see how easy it is to code.
NEXT:
Let’s pretend that you decided that you only want 4 square boxes instead of 5. Making that change requires 3 fairly simple changes.
- Delete one box from the HTML (makes sense )
- Change the padding-top value of .outerwrap from 20% to 25%:
.outerwrap {
padding-top:20%; /* DELETE Me */
padding-top:25%; /* ADD Me */
- and finally experiment to determine new .outermost and media query widths.
I came up with .outermost {width:42em}, and a media query max-width of 43em based on the contents of the square boxes.
.outermost {
width:42em;
@media screen and (max-width:43em) {
(Do you see that it is necessary to know the approximate contents of boxes to create reasonably accurate code? What we see here is quite different than your original “visual” suggested it might be.)
There are a number of posts by Paul that explain in detail how vertical padding and absolute positioning are used to create a fluid “viewing area” with a fixed aspect ratio usually for videos. The CSS is not trivial, but with enough reading and experimentation it is completely learnable.
That technique is being used here along with the CSS table property {table-layout:fixed} to create the square boxes.
Each box in a 5 box lineup is 1/5 or 20% of the total width. In a 4 box lineup each box is 1/4 or 25% of the total width. That percent width is where the .outerwrap padding-top value comes from which is used to set the height of the boxes.
BACK to your OP:
You were considering divs or list items and wondering which tags would be the most semantically appropriate. At this stage, I would recommend replacing the <ul> tag with a <nav> tag and the <li> tags with <a> anchor tags because the object with 5 boxes seems like a navigation menu. An advantage of replacing the <li> tags with <a> tags is that the entire box (a CSS table-cell) becomes clickable. Try it. See what YOU think:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>5 fixed boxes nav</title>
<!--
-->
<style type="text/css">
.outermost {
width:52em;
margin:0 auto;
}
.outerwrap {
position:relative;
padding-top:20%;
}
.wrapper {
background-color:#bdf;
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
}
nav {
display:table;
table-layout:fixed;
border-collapse:collapse;
width:100%;
height:100%;
padding:0;
margin:0;
}
a {
display:table-cell;
vertical-align:middle;
text-align:center;
font-family:Arial,sans-serif;
font-weight:bold;
border:1px solid #854;
text-decoration:none;
}
span {
display:block;
font-size:.9em;
font-weight:normal;
}
@media screen and (max-width:53em) {
.outermost {width:auto;}
.outerwrap {padding-top:0;}
.wrapper {position:static;}
nav {display:block;}
a {
display:block;
text-align:left;
padding:.5em;
}
a + a {border-top:0;}
}
</style>
</head>
<body>
<div class="outermost">
<div class="outerwrap">
<div class="wrapper">
<nav>
<a href="#go1">Responsive Design
<span>Lorem imsum dolor sit amet, consectetur adipiscing elit. Donec lictus nulla, scelerisque id augue in, maximus mollis erat.</span>
</a>
<a href="#go2">Mobile
<span>Lorem imsum dolor sit amet, consectetur adipiscing elit. Donec lictus nulla, scelerisque id augue in, maximus mollis erat.</span>
</a>
<a href="#go3">SEO
<span>Lorem imsum dolor sit amet, consectetur adipiscing elit. Donec lictus nulla, scelerisque id augue in, maximus mollis erat.</span>
</a>
<a href="#go4">Programming
<span>Lorem imsum dolor sit amet, consectetur adipiscing elit. Donec lictus nulla, scelerisque id augue in, maximus mollis erat.</span>
</a>
<a href="#go5">Business Development
<span>Lorem imsum dolor sit amet, consectetur adipiscing elit. Donec lictus nulla, scelerisque id augue in, maximus mollis erat.</span>
</a>
</nav>
</div>
</div>
</div>
</body>
</html>
1 Like
By checking here and seeing what browsers support it and whether that aligns with what I want to support. Floats work for all browsers, table-cell and such do not
This suggests display: table is what you want.
Yes, especially in RWD.
width: 20% with box-sizing: border-box will divide the children of a container into 5 equal parts and remain responsive. But using display: table will take care of width and height for you. table-layout: fixed (as per ronpat’s example) will make any number of cells equal width. So there are other better options.
First off, I appreciate all of your efforts.
After looking at your code, it is hard for me to follow. Some of your design choices don’t seem very intuitive to me.
(It would be interesting to see if others would design the same web page differently.)
Okay, here are some questions I have about your code…
1.) What is the purpose of .outermost, .outerwrap and .wrapper? (Especially the first two.)
2.) Why did you make .outerwrap position:relative?
3.) On .outerwrap, padding-top:20% is 20% of what?
4.) Why did you position .wrapper absolutely?
5.) What does table-layout_ fixed do?
In your media query, why do you…
6.) Set .outermost {width:auto;}
7.) Set .wrapper {position:static;}
It makes each cell (column) in the “virtual” table equal in width. The default behaviour will size the cells according to the content, which can be useful sometimes when width is reduced.
So how would you approach things using floats?
This is explained in detail in the “brief followup” that I wrote.
As SamA74 said, a table with {table-layout:fixed} will by default create equal width cells (columns) regardless of cell content.
The purpose of the extra layers of code, .outermost, .outerwrap and .wrapper, is to frame the table in a box with a fixed aspect ratio so those 5 cells are square. (Mentioned in my follow-up) If square boxes were not required, the extra layers would not be necessary.
The media query undoes the framework that establishes the fixed aspect ratio. .outermost loses its width, .wrapper loses position:absolute, the cells become blocks and extend the full available width of the page (and the text in the cells can stretch the full width of the page), etc.
You talked about 20% like it was a width of the box, but I don’t see what that has to do with top padding??
Why can’t .outermost and .outerwrap be combined?
It appears that making .wrapper absolute and then doing top:0, left:0, right:0, bottom:0 s-t-r-e-t-c-h-e-s the wrapper to fit .outerwrap, right?
And since .outerwrap is inside .outermost - which is 52em wide - that in effect makes the 5-box row 52em wide, right?
Then since ul is width:100% and height:100%, then that makes it expand to fit .wrapper which expanded to fit .outerwrap which expanded to fit .outermost, right?
I don’t see how you are getting 5 equal width boxes and how you ensure they are square…
Because the height of .outerwrap {padding-top:20%} depends on the width of .outermost (the parent container). Ie, padding-top in percent is relative to the width of the parent contaner. The same is true of vertical margin using percent values. That’s just how CSS works.
I’ve posted working pages. Try altering the code for yourself and see what happens.
Yes
Yes, right on!
Yes, yet again. 
Note: Remember that one cannot normally assign a height of 100% to a box? Well, here you see an exception. {height:100%} works here because the table is inside an absolutely positioned box.
Have we achieved an epiphany, yet?
Closer, but not yet.
.outwrap is giving me grief!
So we have…
.outermost {
width:52em;
margin:0 auto;
}
.outerwrap {
position:relative;
padding-top:20%;
}
.wrapper {
background-color:#bdf;
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
}
.outermost is 52em (832px), and Now, .outerwrap padding-top:20% is 20% of the parent, so .outwrap is approx 166.39px
Now, up until this point, when someone said “padding” I thought of that space between the content and the element’s containing box. So, if .wrapper goes inside of .outerwrap, then I would expect there to be white-space of 166.39px between them, but there isn’t.
The best I can tell looking at the code and the end result in Chrome and in Chrome Developer Tools is that .outerwrap is almost taking on a “height” of 166.39px…
(The more I play with the code the more confused I get!)
<restated>
.outermost has a width of 52em, and .outerwrap has a height that is 20% of the width of .outermost thanks to .outerwrap {padding-top:20%}, so outerwrap is…
`
The box known as .outerwrap is filled completely with padding. There is no room for anything else to fit inside. Instead of inside, .outerwrap is assigned {position:relative} so it can be used as the relative “anchor box” for the absolutely positioned .wrapper which in turn is told to position itself corner to corner over .outerwrap and thereby creates a 5:1 container for the table that has been assigned width:100% and that magic height:100% along with the necessary {table-layout:fixed} property. And the deed is done!
(I think that’s the longest sentence I’ve written in years )
1 Like