By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,625 Members | 2,235 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,625 IT Pros & Developers. It's quick & easy.

css problem

P: n/a
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
Share this Question
Share on Google+
4 Replies


P: n/a
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

P: n/a
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

P: n/a
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

P: n/a
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.