CODEWITHSUNDEEP
css
Robert Peek
Robert Peek

Reputation: 201

Contain text within

CSS question: I'm wanting a container with 3 inline images with a border around them (not each image). Under the image row and inside the container border I want a sentence or two of text. Without the text the container border is about the same width and height as the image row using display:inline-block, once I add the text the container width is 100%. I want the text to wrap under the image row and not expand beyond the left/right sides of the image row. I would like to know how this can be done and if it can be done using float:left and/or display:inline, display:inline-block. If it can be done both ways what are the pros and cons.

HTML:

<div class="container">
    <img src="image1">
    <img src="image2">
    <img src="image3">
    some text
</div>

CSS:

.container {
    display: inline-block;
    border: 1px solid black;
}

Upvotes: 1

Views: 2080

Answers (2)

Robert Peek
Robert Peek

Reputation: 201

This is a good example of what I'm wanting but with the text below the images. I would also like it to be HTML 5 compatible. 

<div class="container">
<table>
<tr>
<td><img src="image1.jpg" height="200"></td>
<td><img src="image2.jpg" height=200"></td>
</tr>
<caption>a paragraph of text here...</caption>
</table>
</div>

.container {
display: inline-block;
border: 1px solid;
}

table {
margin: 0 auto;
}

Upvotes: 0

Daniel Gimenez
Daniel Gimenez

Reputation: 20599

The following will create a div, with inner blocks for images and a block for text. They should both stay 500px. If the images are > 500px they will be clipped. The text won't cause it to overflow unless its a very long uninterrupted string.

If this doesn't help, use jsFiddle to put up an example.

CSS

.container { 
        width: 500px; 
        overflow: hidden; 
        background:red; 
        display: inline-block;
        border: 1px solid black; 
}

HTML

<div class="container">
  <div class="images">
    <img src="image1">
    <img src="image2">
    <img src="image3">
  </div>
  <div class="caption">
    some text
  </div>
</div>

Upvotes: 1

Related Questions