Suppose I have many floated boxes one next to another, each box has fixed width but the height is variable and depends on the content of the box. When the user resizes the browser window I would like the boxes to overlap nicely to the next line while preserving visible line division.
An illustration: first there are boxes in a wide browser window and below what I would like them to look like in a narrow browser window:
I would like to be able to have as many boxes as I want and would like them to always overlap to the next line like this - possibly without js. With fixed height there is no problem to simply float the elements but with variable heights there are some surprises.
The reason why I want this is I need to present a gallery of products. Each product will have a small photo, some photos will be in the landscape orientation, some in portrait. Additionally, there will be descriptions under some photos (or variable length) while not under others. If I wanted to set fixed height I’d have to accommodate space for the largest possible box, which will waste a lot of space in other cases.
The most obvious choice is to use a table - but in the future I want to apply responsive design and the table will constrain me to a fixed number of boxes in each line.
Ironically, this would be better suited for display:inline-block;
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width">
<style type="text/css">
.effect a { width: 150px; display:inline-block; margin-right:15px; vertical-align: top; margin-bottom: 35px }
</style>
</head>
<body>
<div class="effect"><a href="#"> This link is underlined in a dif color </a> <a href="#"> This link is underlined in a dif color Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</a><a href="#"> This link is underlined in a dif color some extr atextx some extra text some extra text some extra text some etrat dsj dhjah </a><a href="#"> This link is underlined in a dif color some extr atextx some extra text some extra text some extra text some etrat dsj dhjah </a><a href="#"> This link is underlined in a dif color some extr atextx some adjhdfgjsj jakjdsjlkjadsjdkjakdh some extra text some extra text some etxra text some extra text some extra text some extra text xt some extra text some etrat dsj dhjah </a></div>
</body>
</html>
dresden, this is brilliant, I wasn’t expecting such a simple solution as inline-block! This does exactly what I need and additionally I can vertical-align the boxes to middle or bottom if I wish. The only thing I don’t like about inline-blocks is that white space between elements matter so I’d better not use any spaces between them, but this is a very minor inconvenience. Many thanks.