Question

sir,
i created a div tag in my html page and that displays a product.inside the product_box div i have two columns (lleft and right) using float.

both columns fit in the product_box dividing the container into two vertical halves.but when i type content in the right half the content comes out of the div if it is longer than one line.i want that i continue typing multiple lines and it fits inside the right half.

i dnt want the overflow:scroll; method or hidden as well coz the scroll bar looks very bad.

plz suggest a way to acheive this.

CSS:

#content_left .product_box {
    margin-right: 10px;
}


.left {
    float:left;
    padding:10px;
    width:178px;
    height: 174px;
}


.right {    
    float:left;
    padding:10px;
    text-align:left;
    width: 396px;
    height: 136px;  
}

HTML:

<div class="product_box">
   <h3>Product Title</h3>
   <div class="left">some content here</div>
   <div class="right">
     jhkdjfhkjhkjhkjhkhkhkhkjhkjhkjhkjhkhkhkh
   </div>         

   <div class="cleaner"></div>
</div>

Answer 1

You can use min-hieght instead of height to ensure it gets minimum height and grows if the content increases…

and be sure too add float clearer like: <div style="clear:both"></div> after the floating divs… in order to make parent container take its height