What is the easiest way to create 3 boxes that are next to one another and go from left to right?
I have been away from web development for several years and have forgotten everything I knew. And while I want to buy and read SitePoint’s entire library, I am trying to finish something I started before and trying to avoid having to take the next 3-6 months learning everything under the sun about HTML and CSS. At least for now.
In the past, I guess I would have used DIV’s…
I am actually trying to create a visual comparison between 3 different products almost like a Consumer Reports kind of thing.
I was thinking originally of creating the rectangles that were side-by-side with the skinny end going left-to-right.
But now I am thinking maybe I need a 4th column or box to hold the attributes. Who knows, maybe I just need a simpleHTML table?
A B C
----- ----- -----
Price $20 $30 $40
Size 100pg 150pg 225pg
Color N Y Y
Something like above if you can read that.
Hi there UpstateLeafPeeper,
I gave you an example of side by side elements
in this previous thread of yours…
The method can be modified to accommodate
any number of elements. 
coothead
I did finally look last night at the link you provided me, but didn’t finish it because it seemed like it would take a fair amount of time to learn that more modern method.
But either way, what I am asking for help on here isn’t entirely the same.
I was trying to say in my OP that is seems to me that I really have tabular data and that maybe an HTML table would be better suited. But then I am not the expert on such things.
Even if I learned the method you provided a link for, I’m not sure it would help me accomplish the example above.
Hi there @UpstateLeafPeeper. The example @coothead provided you width is quite straigthforward. You asked for three boxes side by side. Since all three boxes have the same content (except for the details) Flex is a perfect sollution
All three boxes may NOT have the same content…
There may be features that don’t apply to a given item or where I need to do more complex formatting like line wraps and so on.
I think CSS has it’s own kind of table, but I’m think a table would be better for what I need since may data will be laid out in rows and columns.
It doesn’t look like Coothead’s example will easily handle that.
In fairness to him, in my other thread, I think his solution had merits, but as I slowly figure out what I am trying to build, it seems like that first solution may not be the best choice.
Hi there UpstateLeafPeeper,
here are your tables side by side…
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>untitled document</title>
<!--<link rel="stylesheet" href="screen.css" media="screen">-->
<style media="screen">
html {
box-sizing: border-box;
}
*, *::before, *::after {
box-sizing: inherit;
}
body {
background-color: #f9f9f9;
font: 100% / 162% BlinkMacSystemFont, -apple-system, 'Segoe UI', roboto, helvetica, arial, sans-serif;
}
h1 {
line-height: 1em;
font-size: 1.5em;
text-align: center;
text-transform: uppercase;
}
#container {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
#container > table {
width: 24%;
margin: 0.5em 0.5%;
border: 1px solid #999;
border-collapse: collapse;
background-color: #fff;
}
#container th,
#container td {
padding: 0.25em;
border: 1px solid #999;
}
@media ( max-width: 52em ) {
#container > table {
width: 49%;
}
}
@media ( max-width: 26em ) {
#container > table {
width: 99%;
}
}
</style>
</head>
<body>
<h1>Page Description Here</h1>
<div id="container">
<table>
<tr>
<th>th description</th>
</tr><tr>
<td>data</td>
</tr><tr>
<td>data</td>
</tr><tr>
<td>data</td>
</tr>
</table>
<table>
<tr>
<th>th description</th>
</tr><tr>
<td>data</td>
</tr><tr>
<td>data</td>
</tr><tr>
<td>data</td
</tr></tr><tr>
<td>data</td>
</tr><tr>
<td>data</td>
</tr><tr>
<td>data</td>
</tr>
</table>
<table>
<tr>
<th>th description</th>
</tr><tr>
<td>data</td>
</tr><tr>
<td>data</td>
</tr><tr>
<td>data</td>
</tr>
</table>
<table>
<tr>
<th>th description</th>
</tr><tr>
<td>data</td>
</tr><tr>
<td>data</td>
</tr><tr>
<td>data</td>
</tr>
</table>
<!-- #container --></div>
</body>
</html>
coothead
Thank you for the sample code - that was very thoughtful of you!
The end result is closer to what I think I need, but I’m honestly rather confused by the approach you took.
It looks like you nested 4 separate HTML tables inside a “flex” container.
Can you explain the logic of this?
About the time I was getting out of web development, I thought CSS3 had some CSS type tables that were supposed to be better than a traditional HTML table. Do you know what I’m talking about? And if, what using that approach?
Your thinking of display:table;
It is used to mimic the layout behavior of html tables. It is to be used with html elements other than html table elements, such as divs etc.
It is not better than html tables, it behaves in similar fashion. if you have true tabular content you still need a table.
display:table was developed to help stop the abuse of html tables for page layout.
So how does that compare to what @coothead proposed?
Also, I may have been thing of using DIV’s with online-block or something like that. As I recall, this forced DIV’s to bump up against each other, and as you expanded/contracted the viewport size, the DIV’s would just flow into the available space.
This is all very vague to me being away from this for several years. 
Coothead was using html tables nested in a parent container div set to display:flex
The html tables are now also flex items which makes it easier to lay them out in a row and space them out evenly. Flexbox also controls the flexible width of the flex items (the tables). Everything inside the <table> element is unaffected by flexbox and maintains table behavior.
It is a much more efficient way of doing what you want than using display:table
It sounds like it would be good learning for you to catch up on Flexbox…
So is it bad to use straight up HTML tables in today’s web?
And does nesting HTML tables inside a flexbox solve all probems like making things responsive?
Thank you for the links.
I will look at them and hopefully can follow them.
BTW, I am eager to get back into web development, and plan on buying a SitePoint subscription so I can start reading the latest SitePoint books, it’s just that I would like to finish my unfinished website project first before I become a professional student again. That is why I really appreciate when people can help me take the fast-lane to some answers so it doesn’t take me another 2 years to complete my site!!
No, as I mentioned earlier you still use tables when you have true tabular content, which it looks like you do.
Flexbox is a step in the right direction to making a flexible responsive page. But out of the box it may not solve all your problems when mixing tables in with it. It depends on the amount of rows and columns your table has. You may find yourself needing some media queries too. There were some media queries used in cootheads example.
Most of the examples I try here don’t work on the code you gae me.
I was playing around trying to get coothead’s tables to stretch out across the row and to stretch so they are all the same height, for instance, but when I apply the styles to #container > tbale it doesn’t work.
Why?
When I tinker with the dynamic examples on that page I see changes occur.
Sorry for all of the dumb questions, but I’m trying to relearn all of this!
It occurred to me this morning that I’m still confused on things and need help marrying two different concepts.
So, first I need help with figuring out how to best try and display 3 different membership-plans, where not only am I showing them side-by-side, but I’m thinking that a table is better so people can easily compare features across each plan and see what works best for them.
I believe that what @coothead and @Ray.H have shown me is getting closer to what I need from a visual presentation standpoint. (Although as mentioned, when I was trying to apply different settings to the Flexbox, it wasn’t really working.)
Okay, so I’ve made progress there.
The second area, though, which also is escaping me what to do, is making this page a Form.
I guess what I am envisioning is something like this… I have my 3 membership-pans laid out so they look like a table and you can scan down a list of features and compare each plan against another, but each plan still looks like a box so it appears as a “thing” by itself, and then maybe at the top and boton of each membership-plan box is a button that says “Select”.
If the user chooses “Select” for Plan-A or Plan-B then I take them to the checkout form, and if the user chooses “Select” for Plan-C then I take them to a page where they can choose their free eBook.
The point is that however I format/style these membership-plans as boxes/tables/whatever, it occurred to me now that there also needs to be a FORM so the user can submit what they want to do (e.g. “I want to select Plan-C…”)
If I use @coothead and @Ray.H’s Flexbox and 4 separate tables, then how do I do an HTML Form also?
Do I just wrap all of those separate tables in one monster HTML Form?
Or do I make the 2n, 3rd, and 4th nested tables its own HTML Form?
Or by me mentioning this additional need, did I just break the solution above?
Finally, since for version 1.0 I am sadly not supporting “responsive” design, would it be easier to just use a single HTML table?
I am opening to advice from the exprts, and sorry to be such a PITA, but all of this is not my strong suite!!
(BTW, I promise that after I get my website online, that I am buying a SitePoint subscription and going to read every HTML/CSS/Responsive Design book you all offer!!!) 
Here is an example of what I am trying to do…
That looks fairly close to what I want, except there should be a column on the left which lists the features. So based on the sample, there would be:
I would say that this example pretty much constitutes a “TABLE”, although if you think a “FlexBox” or something else is better, then so be it.
However, in addition to being a table, this also appears to be a “FORM” because you can see that there are form buttoms at the top and bottom of each column to allow the user to select a given product/service.
(I described above how i want the process flow to work.)
So how do I do all of this?
Thanks!
That screenshot looks like it could have been four separate unordered lists styled to look like columns.
Now if you wanted a column on the left for the features then it would all become one table.
Or are they links taking you to a form page where you select your plan? I’ve seen it done that way before too.
I am thinking a table is better because each cells contains the text.
Below is a screenshot of my spreadsheet. See how under “Subscriptions” I have long feature names that look better becaseu of how the wrap around? I think a table (or something similar) makes that easier to do, right?
I have never done this before - which is why I am asking - but can’t you just wrap whatever you are using (e.g. HTML table) with form tages and make it a form also?
From a process flow standpoint, I want to make this as easy as possible for people to checkout.
So the idea is they click on the “Subscribe” button to check things out, I display the page we are discussing with all of the options available, they click on the appropriate “Select” (form) button, and they are on the checkout page enter credit card details!
Below is a portion of the grid I built in my spreadsheet…
Not saying that is my final design, but I think it is pretty close, except it doesn’t have the upper/lower “Select” buttons yet…
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.
