floating div with background image

hi there; thanks for the response ... however, the only issue i see with your suggestion is:

.container {
      width:200px;
      margin-left:auto;
      margin-right:auto;


as there can't be a fixed with on it as the text is dynamic.  unfortunately, width set to 100% left justifies the div B and div C.

hm ill try something else, but that div container needs a fixed width to center it and div-B and div-C they depend on their parent div, so what happens if the container has a width 100% the divs are floating at the right and left of the screen but not centered.

Don't you have live website somewhere as an example? So that i have a better view of what you are trying to achieve. And what you are trying to do is pretty tricky with div classes.

nothing up yet ... but maybe this revised image will help.  do i need to use a table to achieve this since the width of div C is dynamic (i.e could be 500px, might be 800+ etc.)

This is an unusual question. I would you a simple PHP script that would dynamically change the width of C divi

I used your code to test it. It looks like a ten-letter string of words is about 100px. You pass the variable $myString and multiply it by 10. It will resize the div box and justify it at the right leaving a gap between B and C. If this is what you want, try :

<?
$myString = '012345';
$pixel_length = strlen($myString) * 10;
 
echo "<style>
.div-C {
        float:right;
	width: {$pixel_length}px;
        height:100px;
        background:yellow;
}
 
</style>";
?>

                                              

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:

Not a php guy, but thanks for trying Fero45.  i think i'm just going to have to use a table in this situation.  

This is incorrect authoring, tables were never created to use for layout and will give you much the same effect as a group of divisions. You should layout with CSS as the correct use of tables are meant for tabular data:

http://webdesign.about.com/od/tables/a/aa122605.htm

Food for thought

How will you handle word-wrap? The reason I ask is that as far as i can see, you can't increase the size of a container dynamically (unless utilising dynamic code (above)) because words will wrap at their break point.

Are you suggesting that some of your copy words may be 80 characters in length?

Kind regards

hi, wilson1000; i'm open for suggestions ... after all, that's why i'm here (=

i would prefer not to use a table, however, it does accomplish exactly what i need so unless someone is able to assist me with a css solution, then a table it is.

again, just to be clear, i currently have an image in one cell and a line of text in the other. the text is dynamic in length so it's cell stretches to fit.

the table is centered on the page so, together, the image with text are always centered regardless of the length of the text.

hope that's clear.  

You can adjust word-wrap on the container that holds your text.

white-space:nowrap;