Treating an image with <div> tags like a normal image

[mikeym]

Hi,

I'm trying to use some styling on my web page to allow me to have rounded corners on frames for my images. The problem is that my webpage is built on allowing contributors to supply BBCODE which I then convert into the webpage so I need to allow flexibility on my placements of things.

So with this in mind I'm trying to work out how to move images around that are contained in <DIV> tags for the rounded corners that behave in the ways you'd expect when inserted into text. Have you any ideas?

I can center them, float them left and right and put a few on the same line. But when I try to just add one into the middle of text like a normal image it shoves all the text off the line.

[Aso]

I'm not quite sure what you mean? Could you post your code so we can take a look. Or even better, have you got a link to the work-in-progress?

[mikeym]

There's no point in posting my code it's too complicated and wont make anything any clearer. So let me explain further. To get rounded corners on my images borders I need to use a block of code like:

Code: Select all

	<div id="box01">				

		<!--- box border -->
		<div id="lb01">
		<div id="rb01">
		<div id="bb01"><div id="blc01"><div id="brc01">
		<div id="tb01"><div id="tlc01"><div id="trc01">
		<!--  -->
		<div id="content01">
			<img src="xyz" />
		</div>	
		</div>	
		</div>			
		<!--- end of box border -->
		</div></div></div></div>
		</div></div></div></div>
		<!-- -->
		
	</div>

Depending on how the user enters his bbcode he would produce HTML like:

<div style="float: left;"><img src="xyz" /></div>Text flows to the right of the image down the page. This can be achieved in a similar manner using the 'float: left' style on the outer div.

Text flows to the left of the image down the page. This can be achieved in a similar manner using the 'float: right' style on the outer div.
<div style="float: right;"><img src="xyz" /></div>

<div style="text-align: center;"><img src="xyz" /></div>
can be achieved by using cleaver margins set to auto


<div style="text-align: center;"><img src="xyz" /></div>&nbsp;<img src="xyz" /></div>
Two images displayed side by side. More difficult. Can be achieved using a wrapper tag with 'display: table' and 'zindex:1' set.

Now this is where it no longer works. This text should have an image
<img src="xyz" /> embedded into the middle of it. But when I try this with divs it always appears on a separate line with the text above and below it.