Newsgroup: it.comp.www.html
Titolo: Layout CSS 2 colonne - problema float

Ciao, sto sviluppando un layout in CSS a 2 colonne a larghezza fissa. Il
problema che ho non e` tanto nel fare le colonne ma nel fatto che nella
colonna di destra voglio mettere dei link/immagini allineati orizzontalmente
(con float=left). Il risultato, lo potete provare, e` che la colonna di
destra finisce "prima" delle immagini.
Io vorrei che si allungasse tanto quanto basta per inglobare le immagini (o
comunque il suo contenuto). Non voglio che sia necessariamente lunga quanto
quella di sinistra!
Ho anche provato a mettere un bel div subito dopo i link/immagini del tipo:
<div style="clear: both;"></div> (la teoria dice che basterebbe) ma se lo
faccio accadono una serie di schifezze (su IE, mozilla, ecc...).
Che faccio? Grazie.
Codice HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd
">
<html>
<head>
<title>Test 2 Colonne</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body { background: #FFFFFF; text-align: center; margin: 0px; padding: 0px; }
h1, h2, h3, h4, p { margin-top: 0px; margin-bottom: 2%; }
#frame { width: 700px; margin-left: auto; margin-right: auto; text-align:
left; }
#lcontent { background: #FFFFE0; width: 440px; float: left; }
#rcontent { background: #FFE0E0; margin-left: 460px; padding: 10px; }
#rcontent a.lnk { border: 2px solid #FF0000; margin: 0px; padding: 0px;
margin-right: 16px; display: block; float: left; }
#rcontent a.lnk img { display: block; width: 32px; height: 32px; border:
0px; margin: 0px; padding: 0px; }
</style>
</head>
<body>
<div id="frame">
<div id="lcontent">
<h2>Test</h2>
<h2>Test</h2>
<h2>Test</h2>
<h2>Test</h2>
<h2>Test</h2>
<h2>Test</h2>
<h2>Test</h2>
<h2>Test</h2>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut
wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat.
</p>
</div>
<div id="rcontent">
<p>Test</p>
<a class="lnk" href="#"><img src="" /></a>
<a class="lnk" href="#"><img src="" /></a>
</div>
</div>
</body>
</html>

Se non č un problema rendere flottanti entrambe le colonne potresti 
risolvere cosě:
###################################
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd
">
<html>
<head>
<title>Test 2 Colonne</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body { background: #FFFFFF; text-align: center; margin: 0px; padding: 0px; }
h1, h2, h3, h4, p { margin-top: 0;  }
#frame { width: 700px; margin-left: auto; margin-right: auto; text-align:
left; border:1px solid red;}
#lcontent { background: #FFFFE0; width: 440px; float: left; }
#rcontent { float: right; margin-left:20px; background: #FFE0E0; width: 
240px; padding-left: 0px; }
#rcontent * { padding-left:16px; }

<div id="frame">


<div id="menucontainer">
<a class="lnk" href="test.htm"><img src="test.jpg" /></a>
<a class="lnk" href="test.htm"><img src="test.jpg" /></a>
</div>
</div>
<div style="clear: both;"></div>
</div>
</body>
</html>
###############################################
Bye 

 risolvere cosě:
Grazie, non ho usato esattamente gli stili che hai messo ma mettendo
float=right e un certo width al div di destra, funziona.