467,874 Members | 1,730 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 467,874 developers. It's quick & easy.

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
  • viewed: 1392
Share:
4 Replies
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

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

11 posts views Thread by Kostatus | last post: by
117 posts views Thread by Peter Olcott | last post: by
18 posts views Thread by Ian Stanley | last post: by
28 posts views Thread by Jon Davis | last post: by
6 posts views Thread by Ammar | last post: by
2 posts views Thread by Mike Collins | last post: by
reply views Thread by jack112 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.