PDA

View Full Version : html+css

flikmax
20-04-2010, 12:57
Salve a tutti, sto cercando di allineare orizzontalmente 2 div (cioè uno di fianco all'altro), che sono contenuti in un altro div contenitore.

il problema è questo: se utilizzo il float, i div non fanno + allungare lo sfondo della pagina ... se tolgo il float torna tutto normale ma i due div non si mettono sulla stessa linea ma uno sopra l'altro!

Vi posto il codice html e quello css:


<body>

<div class="wrapper"> <!-- start wrapper -->
<div class="headerconttop"></div>
<div class="headercontcenter"> <!-- start contenuti -->
<div class="logo">Prova Prova Prova <br />LOGO <br />Fine.<br /></div>
<div class="slideshow"><table><tr>SLIDESSHOW</tr></table></div>
<div class="test">
<div class="content" style="background-color:green;">
news news news news news<br />
news news news news news
news news news news news<br />
news news news news news
news news news news news<br />
news news news news news
news news news news newsnews news news news news
news news news news newsnews news news news news
news news news news newsnews news news news news
news news news news newsnews news news news news
news news news news newsnews news news news news
news news news news newsnews news news news news
news news news news newsnews news news news news
news news news news newsnews news news news news
news news news news newsnews news news news news
news news news news newsnews news news news news
<br /><br />
</div>
<div class="box" style="background-color:maroon;"></div>
</div>
</div> <!-- end contenuti -->
<div class="headercontbot"></div>
</div> <!-- end wrapper -->

</body>




body
{
background-image:url('images/stripe_2339d767d057620337b8ebb2e517445e(2).png');
background-repeat:repeat;
text-align:center;
}

div.wrapper
{
margin:0 auto;
width:1024px;
padding-top:25px;
padding-bottom:5px;
position:static;
}

div.headerconttop
{
margin:0 auto;
width:984px;
background-image:url('images/Sezione 5_top.png');
height:30px;
}

div.headercontcenter
{
margin:0 auto;
width:984px;
min-height:500px;
background-image:url('images/Sezione 5_bg.png');
background-repeat:repeat-y;
}

div.headercontbot
{
margin:0 auto;
width:984px;
background-image:url('images/Sezione 5_bot.png');
height:30px;
}

div.logo
{
text-align:left;
margin:0 auto;
width:884px;
border:1px red solid;
}

div.slideshow
{
margin:0 auto;
width:884px;
height:300px;
border:1px black dotted;
}
div.slideshow table
{
vertical-align:top;
text-align:center;
}

div.test
{
margin:0 auto;
width:884px;
background-color:yellow;
}

div.content
{
width:734px;
position:relative;
left:0px;
}

div.box
{
width:150px;
min-height:50px;
position:relative;
left:734px;
top:0px;
}



mi date una mano a capire il problema?

THX :help:

Ecco cosa accade se nn uso il float:
http://www.undergroundmovement.it/Picture1.jpg

Ecco cosa accade se uso il float:
http://www.undergroundmovement.it/pic2.jpg
lupoxxx87
20-04-2010, 13:00
puoi

• usare i float e dare le dimensioni che vuoi al body, non avendo il restringimento della pagina
• non usare i float ma usare dei position: relative; e aggiustarti le posizioni che vuoi per i due div
• usare una tabella
flikmax
20-04-2010, 13:04
il problema è ke se metto il float:left, il div non continua a far allungare il div in cui è compreso e che ha il compito di fare allungare lo sfondo in base al contenuto..

ho postato uno screen di come vorrei allineare i 2 box
..

edit: ho risolto usando una tabella e dentro i div che mi interessavano!