I have an issue that I am trying to solve. I have created a box. Lets say it is 600px wide. inside the box, I have two smaller divs. one is 130px floated left and the other is 380px floated right. The box looks good and everything is lined up the way I want it to be.
The problem In the left box, I have just a picture. In the right box, I have a short description with some other text. When the description and other information reaches the bottom of the image on the left, it wraps around the image and starts from the far left of the parent box. I don't want that. I want the image to stay on the left and the description to stay on the right. But when you float the image, it no longer takes 100% height of the box. So what is the best way to solve this issue?
When you use floats, you must clear those floats. The most commonly used method is to use either overflow: auto or overflow: hidden. With such a narrow column, it may not be necessary to float them inside the 130px left column. If you float the image in side the left column, then you need to clear that float. You must also clear the floats of the 2 columns, so the overflow property would go onto the div that contains those 2 boxes.
If you put the text into the 380px right-floated box, and you have defined the widths of both divs in your css, then the text in the right column should stay within that box.
When you use floats, you must clear those floats. Not necessarily true - it depends on what you're trying to accomplish...
cybershot, what you've described doesn't add up. As LadynRed stated last, if you have the html/css setup as described there is no way for the text to wrap around the image. Is there a reason you're using the two smaller divs (floated left and right)? You may be able to do this without them.
<div class="container"> <img src="image.jpg" alt="my pic"> <p>This is my text. When the description and other information reaches the bottom of the image on the left, it wraps around the image and starts from the far left of the parent box. I don't want that. I want the image to stay on the left and the description to stay on the right. Some more text to make this even longer.</p> </div>
With the above markup you could set the container to 600px, float the image left, and do one of two things to stop the paragraph from wrapping under the image. One would be to set a left-margin just a bit greater than the width of the image. The other is to set overflow: hidden; on the paragraph.
The problem
In the left box, I have just a picture. In the right box, I have a short description with some other text. When the description and other information reaches the bottom of the image on the left, it wraps around the image and starts from the far left of the parent box. I don't want that. I want the image to stay on the left and the description to stay on the right. But when you float the image, it no longer takes 100% height of the box. So what is the best way to solve this issue?
If you put the text into the 380px right-floated box, and you have defined the widths of both divs in your css, then the text in the right column should stay within that box.
Not necessarily true - it depends on what you're trying to accomplish...
cybershot, what you've described doesn't add up. As LadynRed stated last, if you have the html/css setup as described there is no way for the text to wrap around the image. Is there a reason you're using the two smaller divs (floated left and right)? You may be able to do this without them.
With the above markup you could set the container to 600px, float the image left, and do one of two things to stop the paragraph from wrapping under the image. One would be to set a left-margin just a bit greater than the width of the image. The other is to set overflow: hidden; on the paragraph.