image grid flow outside the contentwrap

Question

I'm creating an image grid. it works fine outside contentwrap but when in contenwrap all the images flow outside the contentwrap. whats wrong with my code? I'm facing one more problem is image caption. I'm unable to add caption to images.

#contentwrap {
    width: 850px;
    float: left;
    margin: 0 auto;
}

#content {
    background: #FFFFFF;
    border-radius: 10px;
    border: 1px solid #ebebeb;
    margin: 5px;
}

ul#grid {
  list-style: none;
  margin: 0 0 0;
  width: 550px;  
  }

#grid li {
  float: left;
  margin: 0 0 10px 5px;
  } 

.portfolio {
  padding: 0px;
  margin-left: 0; margin-right: 0;  margin-top:0;
  width: 513px;
  font-family: arial, serif; 
  text-align: center;
  }

#grid li a:hover img {
  opacity:0.3;  filter:alpha(opacity=30);
  }

#grid li img {
  background-color: white;
  padding: 7px; margin: 0;
  border: 1px dotted #58595b;
  width: 120px;
  height: 98px;
  }  
#grid li a {
  display: block;
  }

HTML:

<div id="contentwrap">
  <div id="content">
    <div class="portfolio">
        <ul id="grid">
           <li><a href="newgrid.html"><img src="image.jpg"></a></li>
           <li><a href="newgrid.html"><img src="image.jpg"></a></li>
           <li><a href="newgrid.html"><img src="image.jpg"></a></li>   
        </ul>                                    
    </div>
</div>
</div>

possible duplicate of [How do you keep parents of floated elements from collapsing?](http://stackoverflow.com/questions/218760/how-do-you-keep-parents-of-floated-elements-from-collapsing) — Abhitalks, Jan 04 '15 at 07:39

score 0 · Answer 1 · answered Jan 04 '15 at 06:12

0

Here is working

JsFiddle

simple add

 height:auto;
overflow:auto;

to class = MyBox

answered Jan 04 '15 at 06:12

sanoj lawrence

951
5
29
69

image grid flow outside the contentwrap

1 Answers1

simple add