Question

I’m currently working on this website,
http://no-illusions.nl
It’s going fine but I found a pretty stupid thing that I can’t resolve.

I have an div (wrapper) with an width of 500px and inside I have different div’s containing images and text. Now the problem is that the text is dynamic in width, on some parts it could be 200px width and on some pages it could be 350px.

So I put the width on 100% but now the part just floats underneath where I want it!

This is how it should look,
![how it should look][1]

But this is how it looks,

I hope you guys can give me a push in the right direction.

Answer 1

Remember that relative sizes are relative to the containing element. If you say width: 50%, you’ll get an element that’s 1/2 the width of its container. So your saying width: 100% makes the text div take 100% of the container’s width, and it becomes 500px as well.

You can put the image inside the text div and float it. With appropriate margins/padding, the text will wrap around the image, and you’d get something like:

imgimgimg   text text text 
imgimgimg   text text text
imgimgimg   text text text

text text text text text
text text text text text

The basic html structure woul be:

<div style="width: 500px;">
    <div style="float: left; margin: 5px;"><img src="..."></div>
    text text text text text
</div>

otherwise you’d need to go with fixed with divs, and dynamically change the text div’s width based on whether there’s an image present or not. if (has image) { width: 350} else { width: 500} type of thing.