How to achieve the next layout in HTML + CSS?

Question

I will start with the ASCII illustration I want to achieve:

   Category title

  Title       Title
+-------+   +-------+
|       |   |       |
|       |   |       |
| Image |   | Image |
|       |   |       |
|       |   |       |
+-------+   +-------+
 Subtitle    Subtitle

   Category title

  Title       Title
+-------+   +-------+
|       |   |       |
|       |   |       |
| Image |   | Image |
|       |   |       |
|       |   |       |
+-------+   +-------+
 Subtitle    Subtitle

So, I have these categories containing elements. Each element consists of Title, Subtitle and Image. Images of different sizes. Their width is 150px, but the height ranges from 150px to 252px. And I can not predict what sizes will be in the future, although they should be somewhere around this size. You can assume that the width is constant 150 pixels, and the height can vary from 150 to 300 pixels.

The categories and counting elements in each category are, of course, arbitrary. Although in each category there will be at least one element (otherwise I do not show the category). The lengths of captions and subtitles are also variable, although they are generally fairly short.

The effect I want to create is as follows:

• ( ) .
• , . . . .
• , . ;
• .
• ; .

, TABLEs, DIVs The Force. , .:) , , ?

, - , ?

Answer 1

UPDATE: Opera 9.51, FF 3.0 IE7.

?;)

. . . , divs . HTML:

<div id="outerContainer">
  <div class="container">
    <div class="categoryTitle">Category title here</div>    
    <div class="itemTitle">Square image </div>
    <div class="myImage"> <img class="myImage" src="http://upload.wikimedia.org/wikipedia/commons/thumb/archive/8/85/20060705145122!Smiley.svg/120px-Smiley.svg.png" /> </div> 
    <div class="subTitle">Subtitle here </div>
  </div>

  <div class="container">
    <div class="categoryTitle">Category title here</div>    
    <div class="itemTitle">High Image</div>
    <div class="myImage"> <img class="myImage" src="http://www.norwegianfashion.no/wp-content/uploads/fashion_shows/2009/Moods%20-%20feb/_SPS7281.jpg" /> </div> 
    <div class="subTitle">Subtitle here </div>
  </div>

  <div class="container">
    <div class="categoryTitle">Category title here</div>    
    <div class="itemTitle">High Image </div>
    <div class="myImage"> <img class="myImage" src="http://www.norwegianfashion.no/wp-content/uploads/Fashion_week/spring_09/regine_mowill/_SPS7094.jpg" /> </div> 
    <div class="subTitle">Subtitle here </div>
  </div>

  <div class="container">
    <div class="categoryTitle">Category title here</div>    
    <div class="itemTitle">Wide Image </div>
    <div class="myImage"> <img class="myImage" src="http://www.norwegianfashion.no/wp-content/uploads/Fashion_week/spring_09/pling/_SPS7181_copy.jpg" /> </div> 
    <div class="subTitle">Subtitle here </div>
  </div>   
</div>

css:

#outerContainer {
  width: 350px;
  border: solid 1px #777;
  overflow: auto;
  text-align: center;
}

.categoryTitle {
  font-weight: bold;
}
.container {
  float: left; 
  border: solid 1px #ccc;
  height: 270px;
  width: 150px;
  margin: 10px 5px 10px 5px;
}

#outerContainer .myImage {
  max-height: 200px;
  max-width: 150px;
  height: expression(this.height > 200 ? 200 : true);
  width: expression(this.width > 150 ? 150 : true);    
}

.imgContainer {
  overflow: hide;
}

Answer 2

, ;-). , (CSS ). :

• -? ( IE6).
• , ​​( ), - . CSS, , , , ( ). .

CSS:

<style type="text/css">

    h3.category { clear: both; }
    div.item { float: left; width: 83px; margin-right: 20px; }
    div.item img { width: 83px; height: 125px; }
    div.item h4 { margin-bottom: 3px; }
    div.item h5 { margin-top: 3px; }

</style>

<h3 class="category">Category <strong>title</strong></h3>

<div class="item">
    <h4>Title</h4>
    <img src="http://www.freefoto.com/images/15/19/15_19_54_thumb.jpg" title="tree" />
    <h5>Subtitle</h5>
</div>

<div class="item">
    <h4>Longer Title</h4>
    <img src="http://www.freefoto.com/images/15/19/15_19_54_thumb.jpg" title="tree" />
    <h5>Longer Subtitle</h5>
</div>

<div class="item">
    <h4>Very Long, Wrapping Title</h4>
    <img src="http://www.freefoto.com/images/15/19/15_19_54_thumb.jpg" title="tree" />
    <h5>Very Long, Wrapping Subtitle</h5>
</div>

<div class="item">
    <h4>Title</h4>
    <img src="http://www.freefoto.com/images/15/19/15_19_54_thumb.jpg" title="tree" />
    <h5>Subtitle</h5>
</div>

<h3 class="category">Category <strong>title</strong></h3>

<div class="item">
    <h4>Very Long, Wrapping Title</h4>
    <img src="http://www.freefoto.com/images/15/19/15_19_54_thumb.jpg" title="tree" />
    <h5>Very Long, Wrapping Subtitle</h5>
</div>

<div class="item">
    <h4>Longer Title</h4>
    <img src="http://www.freefoto.com/images/15/19/15_19_54_thumb.jpg" title="tree" />
    <h5>Longer Subtitle</h5>
</div>

<div class="item">
    <h4>Title</h4>
    <img src="http://www.freefoto.com/images/15/19/15_19_54_thumb.jpg" title="tree" />
    <h5>Subtitle</h5>
</div>

Answer 3

rpflo span. ie7/8, ff3 chrome/safari.

<div class="cat">
  <h2>Category 1</h2>
  <span class="img">
    <h3>Title 1 with a long title wider than 150px</h3>
    <img src="yourimage.png" />
    <h4>Subtitle 1</h4>
  </span>
</div>

CSS:

div.cat { 
  overflow:auto;
  margin-bottom:15px; 
}
div.cat span.img { 
  display:inline-block;
  vertical-align:top; 
  width:150px;
  margin-right:15px;
  text-align:center; 
}
div.cat span.img h3, div.cat span.img h4 { 
  margin:0; 
}

Answer 4

I think the easiest way for such a layout is to use the css framework. The best choice for simple grid layouts - http://960.gs/

Easy to use and no browser compatibility issues.