I'm playing with CSS trying to learn more but right now I don't know what to do
(or even search Google for). I want a part of a page to contain a list of
different photo albums, I want it to look something like this
----------------------------------------------
| | Header |
| Thumbnail | Info |
| | text text text text |
| | |
----------------------------------------------
----------------------------------------------
| | Header |
| Thumbnail | Info |
| | text text text text |
| | |
----------------------------------------------
etc
Unfortunately the result becomes
----------------------------------------------
| | Header |
| Thumbnail | Info |
| | text text text text |
| | ---------------------------|
------------------| Thumbnail | Header |
| | info |
| | text text |
| | text text |
----------------------------
A screen dump can be found at <http://www.yttersjo.se/Hus171/p1.png> (the colors
are just for debugging purposes ;-)
I don't know if know I've understood things correctly but I think that the
thumbnail "reaches below" the div in which it's defined pushing the following
thumbnail to the right.
Unfortunately, I don't understand how I can fix this so the result will look
like I want. I would appriciate if anyone can tell me what I'm missing.
jem
The HTML code looks like this (at the moment)
<div class="swedishpict">
<img src="landsmall.jpg" alt="" width="128" height="96" align="middle">
<h1><a href="familj/hans_johanna_torp_2006/index.html">Hans och Johannas
torp, 22 juli 2006</a></h1>
<p class="albuminfo">2006-07-22, swedish, A <a href="explain.html"
target="_blank">(???)</a></p>
<p>
Vi var och kollade på Hans och Johannas torp.
</p>
</div>
and the relevant parts of the CSS like this
div.swedishpict
{
background-color: #7f0;
margin: 0 auto;
width:400px;
}
div.swedishpict h1
{
background-color: #0f0;
margin: 0px;
font-size: 120%;
}
div.swedishpict p
{
background-color: #00f;
margin: 0px;
}
div.swedishpict img
{
background-color: #f00;
float: left;
padding: 2px 2px 2px 2px;
margin: 2px 2px 2px 2px;
border-color: #999;
border-width: 1px;
border-style: dotted;
}
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
