cma6. This test page is my take on your 1940s_to_designer page. It’s the best I could do without some discussion about your tastes in page design.
At > 900px, it looks like your original.
As the page narrows, it will go through 3 media queries, 900px 700px, and 520px, to adjust the content before reaching the smallest width. It seems to work in FF, Chrome and Opera. I did not test it in IE. It will not work in IE8 without adding a JS script to accommodate media queries. Like I said, this is just a hack to help you decide and describe what you want.
<!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>1940s_to_designer 4</title>
<!--
http://www.sitepoint.com/forums/showthread.php?1189557-Styling-a-horizontal-box
Feb 1, 2014, 10:23
cma6
-->
<style type="text/css">
*, *:before, *:after {
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
.outer {
width:90%;
margin:0 auto;
}
.item {
display:table;
width:100%
overflow:hidden;
}
.item > div {
display:table-cell;
vertical-align:middle;
padding:0;
}
.item img {
vertical-align:top;
}
.item:nth-child(even) {
margin-:1px 0;
margin-left:209px;
}
.item:nth-child(odd) {
background-color:#e5e5e5;
}
.item:nth-child(odd) img {
margin-right:209px;
}
p {
line-height:1.375;
margin:.5em 1.25em;
}
.pid {
padding:0 1.25em;
}
.pid p {
display:inline-block;
width:186px;
vertical-align:top;
overflow:hidden;
font-weight:bold;
margin:1em 0 0;
}
.pid span {
float:right;
}
.pid .reserved {
display:inline-block;
vertical-align:top;
width:auto;
color:#f00;
margin:1em 0 0 3em;
}
@media screen and (max-width:900px) {
.item {display:inline-block;vertical-align:middle;}
.item:nth-child(even) {margin-left:0px;}
.item:nth-child(odd) img {margin-right:0px;}
}
@media screen and (max-width:700px) {
.item .details {display:block;}
.item .image {float:left;margin-right:1.25em}
}
@media screen and (max-width:520px) {
.item .image {float:none;display:block;text-align:center;}
}
</style>
</head>
<body>
<div class="outer">
<div class="item">
<div class="image"><a href="new_page_399.htm"><img src="images/Thumbnails/7416thumb2.jpg" alt="Hanae Mori evening dress" width="209" height="325"></a></div>
<div class="details">
<div class="pid"><p>#7416<span>$975</span></p></div>
<p><a href="new_page_399.htm">Hanae Mori silk evening dress, 1970s.</a> With a silk chiffon top printed with airy blossoms, the exquisite evening design is an exemplar of Mori's style. The floating quality of the print is enhanced with a profusion of bias-cut ruffles that frame the front opening. Celebrated for her exquisitely feminine style, Mori was the first Asian woman to be admitted to France's elite haute couture syndicate. NEW LISTING</p>
</div>
</div>
<div class="item">
<div class="image"><a href="new_page_294.htm"><img src="images/Thumbnails/2782thumb2xx.jpg" alt="Zandra Rhodes 1980s" width="209" height="325"></a></div>
<div class="details">
<div class="pid"><p>#2782<span>$850</span></p></div>
<p><a href="new_page_294.htm">Zandra Rhodes printed silk chiffon dress, 1980s.</a> The extravagantly feminine, fantasy print is signature Rhodes, who is among today's most original designers. It is hand screened with a peacock feather print accented with iridescent leaf paillettes and clear beads. The edges are hand rolled and embellished with faux pearls, faceted clear beads, and faux pearl drops on the hem points. NEW LISTING</p>
</div>
</div>
<div class="item">
<div class="image"><a href="new_page_419.htm"><img src="images/Thumbnails/2780thumb2.jpg" alt="Carosa di Roma ballgown" width="209" height="325"></a></div>
<div class="details">
<div class="pid"><p>#2780<span>$1,250</span></p><p class="reserved">Reserved</p></div>
<p><a href="new_page_419.htm">Carosa di Roma satin ball gown from the Dupont estate, 1950s.</a> The soft petal pink satin fabric embodies an ineffable feminine elegance. The regal simplicity of the front draws attention to the dramatic bouffant back, held in place with a garland of charmingly lifelike satin flowers. This matchless exemplar of 1950s romanticism personifies the unabashed, heartrending femininity of the period. NEW LISTING</p>
</div>
</div>
<div class="item">
<div class="image"><a href="new_page_787.htm"><img src="images/Thumbnails/2801thumb2.jpg" alt="Bill Blass 1970s" width="209" height="325"></a></div>
<div class="details">
<div class="pid"><p>#2801<span>$850</span></p></div>
<p><a href="new_page_787.htm">Bill Blass chiffon dress, 1970s.</a> Finely constructed with bias-cut panels of black chiffon over a black silk crepe lining, the LBD flutters when you move. I love the contrast of the high neckline with the sexy, open, faux sleeves. The stand up collar, ruched at the center-back, drapes in graceful folds in front. Here is Bill Blass at the top of his game—glamorous and casually sophisticated. NEW LISTING</p>
</div>
</div>
<div class="item">
<div class="image"><a href="new_page_605.htm"><img src="images/Thumbnails/7410thumb2.jpg" alt="Zandra Rhodes dress" width="209" height="325"></a></div>
<div class="details">
<div class="pid"><p>#7410<span>$1,450</span></p><p class="reserved">Sold</p></div>
<p><a href="new_page_605.htm">Zandra Rhodes "Field of Lilies" evening dress, 1970s.</a> This exemplar of Rhodes' early work uses the original paper design, <em>Field of Lilies</em>, that the Victoria and Albert Museum chose for their textile archives. The ethereal creation floats over the body like a delicate butterfly. The Field of Lilies print is embellished on the bodice and sleeves with sparkling star-shaped paillettes.</p>
</div>
</div>
<!--
<div class="item">
<div class="image"><a href=""><img src="images/Thumbnails/" alt="" width="209" height="325"></a></div>
<div class="details">
<div class="pid"><p><span></span></p></div>
<p><a href=""></a></p>
</div>
</div>
<div class="item">
<div class="image"><a href=""><img src="images/Thumbnails/" alt="" width="209" height="325"></a></div>
<div class="details">
<div class="pid"><p><span></span></p></div>
<p><a href=""></a></p>
</div>
</div>
-->
</div>
</body>
</html>