div che vanno a capo -e non devono!

gphp

div che vanno a capo -e non devono!

Ciao a tutti.
Ho quattro div affiancati

<div id="content">
<div id="single0">/</div>
<div id="single1">/</div>
<div id="single2">/</div>
<div id="single3">/</div>
</div>
```il primo è fisso, mentre gli altri no.

#single0 {
float:left;
position: fixed;
overflow: hidden;
witdh: 30px;
}

#single1 {
width:600px;
float: left;
position: relative;
overflow:hidden;
}

#single2 {
width: 350px;
float: left;
position: relative;
overflow:hidden;
}

#single3 {
width: 240px;
float: right;
position: relative;
overflow:hidden;
}


1. come mai single3, avento un float right non rimane a destra ma si accoda agli altri verso sinistra?

2. come devo fare per far si che, se rimpicciolisco la pagina, i div  rimangano allineati ( e si attivi lo scroll orizzontale) e non scendano  sotto quando non ci stanno più?

questo è il content

#content
{
float:left;
margin: 55px auto;
position:relative;
clear: both;
}

marcocarrieri

La struttura che vuoi allora è un rettangolone contenitore ( content ) che abbia al suo interno uno a fianco dell'altro altri rettangolini ( single ) e ci sia solamente uno scrolling orrizontale sul content?

gphp

Si!

marcocarrieri

Una cosa del genere puo andare?
Nel caso positivo resterebbe da definire lo scrolling orrizontale.

[php]
<html>
<head>
<title>Test</title>
<style type="text/css">
body
{
padding:0px;
background:#ADD8E6;
margin:0px;
text-align:center;
}

        #content
        {
            width:1220px;    
            margin:0px auto;    
        }
        
        #header,#footer
        {
            width:1220px;
            background:#00ffff;
        }
        
        #single0 
        {
            width: 30px;
            background:#CCCCCC;
            text-align:left;
            float:left;
        }

        #single1
        {
            width:600px;
            background:#FFD4D4;
            text-align:left;
            float:left;
        }

        #single2
        {
            width: 350px;                
            background:#AAFFFF;
            text-align:left;
            float:left;
        }

        #single3
        {
            width: 240px;
            background:#FFFFAA;
            text-align:left;
            float:left;
        }                    
    </style>
</head>
<body>
    <div id="content">
        <div id="header">Header</div>
        <div id="single0">0</div>
        <div id="single1">
            testo1<br />
            testo2<br />
            testo3<br />
            testo4<br />
            testo5<br />
        </div>
        <div id="single2">2</div>
        <div id="single3">3</div>
        <div style="clear:both"></div>
        <div id="footer">Footer</div>
    </div>
</body>

</html>
[/php]