CSS Layout (1 div - 4 imgs floating from the right) - css

Question

I'm working on css layout where the first div should contain text, the div's width and height should be flexible according to content. On the right there should be 4 (in future maybe more) images with the same dimensions, at the best adaptable to the first div, but they have to be squares. For now I have just something like this. Any ideas? Thank you!

Answer 1

What about using floats? You would have two container divs one float right. The images could easily be held in a table since they are all the same size. If you know the width of the images ahead of time you could have the first div predefined to that width and height so that if the layout gets too small it won't break apart the images.
<div style="float:right;">
<table>
<tr>
<td><img src="" /></td>
<td><img src="" /></td>
</tr>
<tr>
<td><img src="" /></td>
<td><img src="" /></td>
</tr>
</table>
</div>
<div>
<p>some text here</p>
</div>

Answer 2

You can use the following HTML:
​<div id="wrapper">
<div id="display">Some text</div>
<div id="rightBar">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​
Along with the following CSS:
#wrapper {
overflow: auto;
background-color: yellow;
display: inline-block
}
#display {
width: 100px;
height: 100%;
float: left;
border: 1px solid black;
}
#rightBar {
width: 100px;
background-color:red;
float: left;
}
#rightBar div {
border: 1px solid black;
width: 40px;
height: 40px;
display: inline-block;
}​
See a live example here