html - Div not expanding with pictures -


okay first off i've tried overflow:hidden; didnt work div looking when add more images div not expand it.

what div looks enter image description here

.working{      width: 600px;      height: 2000px;      background-color: #ececec;      border-style: ridge;      border-width: 5px;      overflow: hidden;  }
<div class="working">        <p align: left; style="font-size: 25px; font-weight: bold; color: #39f51b; display: block;">    <img src="img/shopify.jpg" align="middle" style="width: 100px; height: 100px;">  shopify dropshipping</p>    <p align: left; style="clear: left; display: block; font-size: 25px; font-weight: bold; color: black;"><img src="img/code.png"  align="middle" style="width: 100px; height: 100px;">      coding </p>    <p align: left; style="clear: left; display: block; font-size: 25px; font-weight: bold; color: black;"><img src="img/ads.jpg"  align="middle" style="width: 100px; height: 100px;">      advertisement </p>   <p align: left; style="clear: left; display: block; font-size: 25px; font-weight: bold; color: black;"><img src="img/amazon.png"  align="middle" style="width: 100px; height: 100px;">      amazon mechanical turk </p>   <p align: left; style="clear: left; display: block; font-size: 25px; font-weight: bold; color: black;"><img src="img/fiverr.png"  align="middle" style="width: 100px; height: 100px;">      fiverr </p>   <p align: left; style="clear: left; display: block; font-size: 25px; font-weight: bold; color: black;"><img src="img/foap.jpg"  align="middle" style="width: 100px; height: 100px;">      sell photos </p>        <p align: left; style=" font-size: 25px; font-weight: bold; color: black;"><img src="img/pocketflip.jpg"  align="middle" style="width: 100px; height: 100px;">pocketflip</p>      </div>

its because have fixed height. try removing height:2000px.

.working{      width: 600px;      background-color: #ececec;      border-style: ridge;      border-width: 5px;      overflow: hidden;  }
<div class="working">        <p align: left; style="font-size: 25px; font-weight: bold; color: #39f51b; display: block;">    <img src="img/shopify.jpg" align="middle" style="width: 100px; height: 100px;">  shopify dropshipping</p>    <p align: left; style="clear: left; display: block; font-size: 25px; font-weight: bold; color: black;"><img src="img/code.png"  align="middle" style="width: 100px; height: 100px;">      coding </p>    <p align: left; style="clear: left; display: block; font-size: 25px; font-weight: bold; color: black;"><img src="img/ads.jpg"  align="middle" style="width: 100px; height: 100px;">      advertisement </p>   <p align: left; style="clear: left; display: block; font-size: 25px; font-weight: bold; color: black;"><img src="img/amazon.png"  align="middle" style="width: 100px; height: 100px;">      amazon mechanical turk </p>   <p align: left; style="clear: left; display: block; font-size: 25px; font-weight: bold; color: black;"><img src="img/fiverr.png"  align="middle" style="width: 100px; height: 100px;">      fiverr </p>   <p align: left; style="clear: left; display: block; font-size: 25px; font-weight: bold; color: black;"><img src="img/foap.jpg"  align="middle" style="width: 100px; height: 100px;">      sell photos </p>        <p align: left; style=" font-size: 25px; font-weight: bold; color: black;"><img src="img/pocketflip.jpg"  align="middle" style="width: 100px; height: 100px;">pocketflip</p>  <p align: left; style=" font-size: 25px; font-weight: bold; color: black;"><img src="img/pocketflip.jpg"  align="middle" style="width: 100px; height: 100px;">pocketflip</p>  <p align: left; style=" font-size: 25px; font-weight: bold; color: black;"><img src="img/pocketflip.jpg"  align="middle" style="width: 100px; height: 100px;">pocketflip</p>  <p align: left; style=" font-size: 25px; font-weight: bold; color: black;"><img src="img/pocketflip.jpg"  align="middle" style="width: 100px; height: 100px;">pocketflip</p>  <p align: left; style=" font-size: 25px; font-weight: bold; color: black;"><img src="img/pocketflip.jpg"  align="middle" style="width: 100px; height: 100px;">pocketflip</p><p align: left; style=" font-size: 25px; font-weight: bold; color: black;"><img src="img/pocketflip.jpg"  align="middle" style="width: 100px; height: 100px;">pocketflip</p>        </div>


Comments

Popular posts from this blog

Sort a complex associative array in PHP -

vb.net - How to ignore if a cell is empty nothing -

recursion - Can every recursive algorithm be improved with dynamic programming? -