Question

I have a problem with 2 divs.

Its a box with 100% width that has 2 divs. Left one is a thumbnail image. Right one is description.

My problem is that when you resize your browser window, data description goes below thumbnail. I’ve added min-width with no results. Maybe I’m adding it in the wrong place.

Thanks a lot.

http://jsfiddle.net/NzX9e/

Answer 1

Don’t mix % values with fixed widths if you want things to work properly as you scale your window. A div will naturally take all the space given it by the parent. So what you really need to do here is drop a lot of all the unnecessary styles and markup you have.

For this specific case: http://jsfiddle.net/NzX9e/7/

Basically, you float the div containing the img and remove all the other styles on the one beside it (I added some padding to it to give it a bit of breathing room next to the image).

.docBox {
   border: solid 1px #006633;
   margin: 10px 0px 0px 10px;
   overflow: hidden;   <- this acts like a clear to keep the floated div in the parent
}

.previewImgBox {
   height: 70px;
   width: 50px;
   text-align: center;
   float: left;
}

.previewData {
    padding: 0 0 0 60px;
    'all the styles you had here are not needed and cause your problem'
}

I wasn’t about to go through and clean up all the markup and styles, just calling it out that you have a lot more than needed. Probably more than double for what you are trying to accomplish. Less is more. 🙂