allineamento div

**danloppa** · 28-03-2008, 10:04

Ho un menu di navigation sulla sinistra suddiviso in 3 div, esso ha float a sinistra. Il div contenent invece non ha float e vorrei che si disponesse a destra del div navigation invece si dispone per tutta la lunghezza della pagina.

codice:

<body>
<div id="container">
      <div id="header">
        <div id="header_left">header_left</div>
        <div id="header_right">header_right</div>	
      </div>
	
            <div id="navigation">
	    <div class="menu_red">
	      <div class="topleft">
         	      <div class="topright">
                   <div class="contenuto">
                   

menu_red</p>
	      </div>
                   </div>
         	      </div>
      	    </div>
                 <div id="menu_white">menu_withe</div>
	    <div class="menu_green">
	         <div class="topleft">
         	         <div class="topright">
                      <div class="contenuto">
                      

menu_green</p>
	         </div>
                      </div>
         	         </div>
	     </div>	
	</div>
	
                    <div id="contenent">
		<div id="menu">menu</div>
		<div id="contenuti">contenuti</div>
	       </div>
	
                             <div id="footer">footer</div>
    </div>
</body>

foglio di stile:

codice:

/* CSS container */
#container {
width:expression(document.body.clientwidth < 600 ? "600px" : "auto" );
min-width:600px;
} 

/* CSS header_left */
#header_left {
height:150px;
float:left;
width:13em;
margin-left:1em;
border: 1px solid black;
}

/* CSS header_right */
#header_right {
height:150px;
margin-left:15em;
margin-right:1em;
border: 1px solid black;
}

/* CSS navigation*/
#navigation {
height:auto;
float:left;
width:14em;
clear:left;
margin-bottom:1em;
}

/* CSS menu_red*/
.menu_red {
width:13em;
margin-left:1em;
border: 1px solid black;
height:5em;
margin-top:1em;
background-color:#CC0000;
}
.topleft { background: url(top_left.gif) no-repeat top left }

.topright { background: url(top_right.gif) no-repeat top right }

.contenuto { padding: 10px;
			height:100px; }

/* CSS menu_white*/
#menu_white {
width:13em;
margin-left:1em;
border: 1px solid black;
height:5em;
margin-top:0.5em;
}

/* CSS menu_green*/
.menu_green {
width:13em;
margin-left:1em;
border: 1px solid black;
height:5em;
margin-top:0.5em;
background-color:#006600;
}
.topleft { background: url(top_left.gif) no-repeat top left }

.topright { background: url(top_right.gif) no-repeat top right }

.contenuto { padding: 10px;
			height:100px; }


/* CSS contenent*/
#contenent {
margin-right:1em;
margin-left:1em;
height:4em;
width:auto;
}

/* CSS menu*/
#menu {
height:2em;
border: 1px solid black;
margin-top:1em;
margin-left:30em;
background-color:#0000FF;
}

/* CSS contenuti*/
#contenuti {
width:100%;
height:4em;
border: 1px solid black;
margin-top:0.5em;
}

/*footer*/
#footer {
clear:both;
height:3em;
margin-top:1em;
margin-left:1em;
margin-right:1em;
border: 1px solid black;
}

http://forum470.altervista.org

nella pagina c'è un link ad un immagine di come vorrei che venisse.

Grazie anticipatamente Danloppa

**Emar** · 29-03-2008, 20:25

potresti usare i margini negativi (penso) ma questo sistema secondo me è pericoloso perchè è molto soggettivo e varia da browser a browser.

Ti comviene creare un'altro div all'intenro del contenente con float:right.

Discussione: allineamento div

Strumenti discussione

Ricerca discussione

Visualizza

allineamento div

Permessi di invio