Layout in modal - html

Question

I'm trying to setup a modal that has a an image and text strictly on the left side with a border around it with also a button also inline with the image and text on the left hand side with a border around it as well. From there I'm trying to put links on the left side of the image/text/button so that it's symmetrical. I'm having trouble though getting the border to stay only around the image and have the text word-wrap under the image. This is currently what I've been creating:
HTML:
<!-- Button trigger modal --> <a data-toggle="modal" href="#myModal" class="btn btn-primary btn-lg">Launch demo modal</a>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<div class="content" style="word-wrap">
<img class="img-responsive" src="https://www.gl.ciw.edu/sites/www.gl.ciw.edu/files/users/pwoodard/microbiology.jpg" alt="image" />
<p float:left;>This is the text. This is the text. This is the text. This is the text. This is the text. This is the text. This is the text. This is the text.</p>
<button type="button" class="btn btn-primary" data-dismiss="modal" align="center">$4500</button>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
CSS:
.content {
padding: 10px 10px 10px 10px;
position: left;
border:1px solid gray;
outline: thin;
}
http://jsfiddle.net/wan4q/11/

Answer 1

I think you can
Create the class only for the image and specify the border on it.
Using javascript you can set the container width to be equal to the width of the image.
Have your text and the image is the same div so that the text wraps according to the size of you parent div.
JSFiddle
<a data-toggle="modal" href="#myModal" class="btn btn-primary btn-lg">Launch demo modal</a>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<div class="container">
<div class="wrap">
<img class="img-responsive bordered-image" src="https://www.gl.ciw.edu/sites/www.gl.ciw.edu/files/users/pwoodard/microbiology.jpg" alt="image"/>
<div class="content">
<p style="float:left;">
This is the text.
This is the text.
This is the text.
This is the text.
This is the text.
This is the text.
This is the text.
This is the text.
</p>
<button type="button" class="btn btn-primary" data-dismiss="modal" align="center">$4500</button>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
JS :
(function() {
var img = new Image();
var $mydiv = $('.wrap');
img.src = 'https://www.gl.ciw.edu/sites/www.gl.ciw.edu/files/users/pwoodard/microbiology.jpg';
$mydiv.width(img.width);
})();
CSS:
.content {
padding: 10px 10px 10px 10px;
position: left;
outline: thin;
}
.bordered-image{
border:1px solid gray;
}
.wrap {
display: inline-block;
position: relative;
}