css - Div not properly wrapping around contents (image) - Includes margin, possible float/bootstrap issues -

css - Div not properly wrapping around contents (image) - Includes margin, possible float/bootstrap issues -

how size/wrap div container around image within it? where float:right , margin-left:auto potentially causing issues.

i'm struggling div sized wrapping around image within it. please have @ illustration i'm referring here:

link example

(might worth playing around window size help explain problem)

i'm practicing bootstrap first time. reddish blocks on each side grid blocks 1 , 12, bluish , greenish sections filling remaining 10. big orange rectangles responsive images want kept central spaced 20px apart @ times.

using chrome's "inspect element" (or similar) - if inspect orange rectangle on right hand side, , have @ container div (class="container-img-r") - div wrapping around orange image how wanted (albeit including invisible border). i'm not having much luck achieving same result div container orange image on left side (it still fills bluish parent element)

i've played around different options float/margins/position can't seem crack it.

here's css have relevent content:

.container-img-l { /* float:right; ??? nil tried here seemed create difference */ } .container-img-r { float:left; } .item-pos-l { margin-left:auto; border-right:10px solid transparent; /* margins collapsed when resizing window */ height:323px; width:510px; } .item-pos-r { float:left; border-left:10px solid transparent; height:323px; width:510px; }

the reason me wanting div accurately wrap around responsive images want overlay more css content on images, scaling/re-positioning automatically window/device size changes (click here , you'll see i'm hoping implement responsive style).

maybe there clashes bootstrap css @ play i'm out of ideas. hoping implement responsive style little portfolio before upcoming job interview!

any solutions or advice on improve alternative methods hugely appreciated.

your first link doesn't remotely html want create responsive. best larn responsive , fluid (no pixels heights or widths if possible) css before attempting modify framework unfamiliar with. also, have error in html - validate create sure you've closed elements. indent , comment code , avoid utilize of inline styles.

demo: http://jsbin.com/wazanu/2/

http://jsbin.com/wazanu/2/edit -- edit link

css:

body {background:#eee} .header {padding:20px;} .portfolio-grid .col-sm-6 { margin-bottom: 30px } .img-wrapper .title { text-align:center; } @media (min-width:768px) { .img-wrapper { position: relative; overflow: hidden; } .img-wrapper img {width:100%;} .img-wrapper .title { position: absolute; text-align:left; bottom: -90px; padding: 0 20px 20px 20px; height: 150px; background: red; transition: .5s ease-in-out; } .img-wrapper .title h3 { margin: 0; height: 60px; line-height: 60px; } .img-wrapper:hover .title { bottom: 0 } }

html:

<header class="header text-center"> header </header> <div class="container"> <div class="row portfolio-grid"> <div class="col-sm-6"> <div class="img-wrapper"> <img src="http://placekitten.com/g/400/300" class="img-responsive center-block" alt=""> <div class="title"> <h3>title of project</h3> <p>content project goes here</p> </div> </div> </div> <!--/.col-sm-6 --> <div class="col-sm-6"> <div class="img-wrapper"> <img src="http://placebear.com/g/400/300" class="img-responsive center-block" alt=""> </div> </div> <!--/.col-sm-6 --> <div class="clearfix visible-sm"></div> <div class="col-sm-6"> <div class="img-wrapper"> <img src="http://placekitten.com/g/400/300" class="img-responsive center-block" alt=""> </div> </div> <!--/.col-sm-6 --> <div class="col-sm-6"> <div class="img-wrapper"> <img src="http://placekitten.com/g/400/300" class="img-responsive center-block" alt=""> </div> </div> <!--/.col-sm-6 --> </div> <!--/.row--> </div> <!--/.container-->

css twitter-bootstrap responsive-design scale wrap