List movie info in columns that collapse into one column - html

Question

I'm trying to show movie info for a website, but I'm having issues with the CSS and HTML. I want the title (Director:, Cast:, etc) to be in line with the first item in the list, and then have all others follow below. I tried a definition list, but couldn't figure out the css to make it responsive. Now I have a table, but I'm starting to suspect a regular list might be better.
Here is my fiddle which looks how I want it to when the window is wide enough, but gets ruined when shrunk down to mobile (which is when I want the Cast: columns to become one column)
Any help would be super appreciated, I've been playing with this for months.
Here's my html:
<div class="movieinfo">
<table>
<tr class="spaceUnder">
<td class="workheader">Director:</td>
<td>John Carney</td>
</tr>
<tr class="spaceUnder">
<td class="workheader">Writer:</td>
<td>John Carney</td>
</tr>
<tr>
<td class="workheader">Cast:</td>
<td>Keira Knightly</td>
<td class="spacedRight">James Corden</td>
</tr>
<tr>
<td></td>
<td>Mark Ruffalo</td>
<td class="spacedRight">CeeLo Green</td>
</tr>
<tr>
<td></td>
<td>Hailee Steinfeld</td>
<td class="spacedRight">Catherine Keener</td>
</tr>
<td></td>
<td>Adam Levine</td>
</table>
</div>
and my CSS:
.movieinfo {
color: #333333;
font-size: 24px;
line-height: 1.1;
font-weight: 300;
padding: 20px;
background-color: rgba(255,255,255,.7);
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
margin-bottom: 20px;
}

Answer 1

You are partially misusing the table for layout here by putting the cast names in separate cells. Don't let your design requirements influence your decision on how to markup the data. This includes using appropriate HTML elements such as <th> for header cells:
<div class="movieinfo">
<table>
<tr class="spaceUnder">
<th>Director:</th>
<td>John Carney</td>
</tr>
<tr class="spaceUnder">
<th>Writer:</th>
<td>John Carney</td>
</tr>
<tr>
<th>Cast:</th>
<td>
<ul>
<li>Keira Knightly</li>
<li>James Corden</li>
<li>Mark Ruffalo</li>
<li>CeeLo Green</li>
<li>Hailee Steinfeld</li>
<li>Catherine Keener</li>
<li>Adam Levine</li>
</ul>
</td>
</tr>
</table>
</div>
To format the cast in columns there are two options depending on if you want to order the items primely vertically or horizontally. For vertical ordering use columns:
.movieinfo ul {
-webkit-columns: 3 10em;
-moz-columns: 3 10em;
columns: 3 10em;
}
EDIT: When using both a width and a number form columns, then the number is the maxmium number of columns displayed. The gap between the columns can be set with column-gap.
More complete example: http://jsfiddle.net/owdz2m0m/
Or for horizontal use floats:
.movieinfo ul > li {
float: left;
width: 10em;
}
EDIT: Limiting the number of columns with floats is a bit trickier. You'll need to set the max-width of the surrounding element (in this case the ul) to the "column width * maximum Number of columns". So to limit the columns to 2 set .movieinfo ul { max-width: 20em; }
More complete example: http://jsfiddle.net/tr9e8bmv/
In either case you can use media queries at adjust the widths depending on screen size.

Answer 2

I think, You need #media queries. Something like this:
#media only screen and (max-width: 640px){ your style }
And You can build your HTML width <dl> and <ul>
DEMO
If You change window size on demo, You can see how 2 columns become 1 column. Screen 1, Screen 2