css problem

Rod

Hi,

I would like to do an easy thing but after more than 2 weeks I cant' find a
way to do it.
Here is what I would like:
I would like to display a dynamic list of products with a photo and a title,
that's it.
But they should be within a DIV (or a span etc).
This div should have a picture as a background (to simplify it should have a
color).

impossible to do it like this:

PICTURE 1 PICTURE 2 PICTURE 3
titel1 title 2 title3
PICTURE 4 PICTURE 5 ....
titel4 title 5 ...

I did it using FLOAT, but it displays the items OUTSIDE the main div which
contain the background picture (ie, firefox, netscape)!
Acually, at the end, AFTER the main DIV.

Here is a short example which display 2 products:
<div class="listProducts">
<div class="products">
<div>
<img src="xxxx" width="200" height="149">
</div>
<div>
title1
</div>
</div>

<div class="products">
<div>
<img src="xxxx" width="200" height="149">
</div>
<div>
title1
</div>
</div>

</div>

style:
..listProducts {
background-color: #FF4500;
border: thin solid Black;
}
.products {float:left;width:33ex;}

you can see the products are outside the main DIV!!!

any idea?

thanks

Rodolphe

Jul 20 '05 #1

Johannes Koch

Rod wrote:

Here is a short example which display 2 products:
<div class="listProducts">
<div class="products">
<div>
<img src="xxxx" width="200" height="149">
</div>
<div>
title1
</div>
</div> [...]
</div>

style:
..listProducts {
background-color: #FF4500;
border: thin solid Black;
}
.products {float:left;width:33ex;}

you can see the products are outside the main DIV!!!

Of course they are. Floating takes something out of the normal flow. So
the .listProducts box has no .products boxes content.
--
Johannes Koch
In te domine speravi; non confundar in aeternum.
(Te Deum, 4th cent.)

Jul 20 '05 #2

Rod

HI,

thanks for your answer.

So it explains why it does not work.

But do you have a solution to my problem?

thanks you

"Johannes Koch" <ko**@w3development.de> a écrit dans le message de news:
2i************@uni-berlin.de...

Rod wrote:

Here is a short example which display 2 products:
<div class="listProducts">
<div class="products">
<div>
<img src="xxxx" width="200" height="149">
</div>
<div>
title1
</div>
</div>

[...]

</div>

style:
..listProducts {
background-color: #FF4500;
border: thin solid Black;
}
.products {float:left;width:33ex;}

you can see the products are outside the main DIV!!!

Of course they are. Floating takes something out of the normal flow. So
the .listProducts box has no .products boxes content.
--
Johannes Koch
In te domine speravi; non confundar in aeternum.
(Te Deum, 4th cent.)

Jul 20 '05 #3

Els

Rod wrote:

"Johannes Koch" <ko**@w3development.de> a écrit dans le message de news:
2i************@uni-berlin.de...

Rod wrote:

Here is a short example which display 2 products:
[snip code with floats]
you can see the products are outside the main DIV!!!

Of course they are. Floating takes something out of the normal flow. So
the .listProducts box has no .products boxes content.

thanks for your answer.

So it explains why it does not work.

But do you have a solution to my problem?

Make a clearing div, after the items, but inside the
surrounding div.
Like this:
<div style="clear:both"></div>
--
Els
http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

Jul 20 '05 #4

Rod

Hi,

THANKS YOU SO MUCH!

You did it!!

It works now.

Again: thanks you thanks you thanks you

Best Regards,
Rodolphe
"Els" <el*********@tiscali.nl> a écrit dans le message de news:
40**********************@dreader2.news.tiscali.nl. ..

Rod wrote:

"Johannes Koch" <ko**@w3development.de> a écrit dans le message de news:
2i************@uni-berlin.de...

Rod wrote:

Here is a short example which display 2 products:
[snip code with floats]
you can see the products are outside the main DIV!!!

Of course they are. Floating takes something out of the normal flow. So
the .listProducts box has no .products boxes content.

thanks for your answer.

So it explains why it does not work.

But do you have a solution to my problem?

Make a clearing div, after the items, but inside the
surrounding div.
Like this:
<div style="clear:both"></div>
--
Els
http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

Jul 20 '05 #5