div addossati a sinistra e clear

**Hysoka** · 26-03-2008, 17:50

Ciao a tutti,
ho un piccolo probemino con i div e roba di questo tipo:
in pratica ho una sidebar a sinistra, usando float:left;
Al centro, tra le altre cose, ho un'altra barra laterale usando un div addossato verso sinistra. Ovviamente queste 2 sidebar NON sono accavallate, stanno ognuno al suo posto.

Quando voglio che i contenuti del centro siano sotto a questa sidebar interna, imposto clear:left,
ma questo, invece, me li mostra sotto alla sidebar laterale + grande, e non a questa interna più piccolina.

Come devo fare a mostrare i contenuti sotto ALLA SECONDA sidebar, anziché di quella più grossa ed esterna?

grazie a tutti e ciao

**gengix** · 26-03-2008, 18:15

Nn si capisce molto da quello che scrivi.
Puoi postare del codice o eventualmente un link?

**Hysoka** · 26-03-2008, 19:30

Originariamente inviato da gengix
Nn si capisce molto da quello che scrivi.
Puoi postare del codice o eventualmente un link?

Hai ragione, ma un link (per ora) non lo posso postare, sfortunatamente.
Ecco una delle pagine in questione

codice:

<body>


        <div id="wrapper">
             <div id="light">

                  <div id="innerwrapper">
                       <div id="topmenubar">
                            <ul class="primary-links">
                           	[/list]
                       </div>
                       <div id="navigator">
                            <a href="" title="Centro Italiano Finanziario">
                               [img]/themes/cif/images/logo.jpg[/img]
                            </a>

                            



                            <div id="nav_container">
                              <ul id="nav">[*][img]/themes/cif/images/home.jpg[/img]Home[*][img]/themes/cif/images/societa.jpg[/img]Societ&agrave;[*][img]/themes/cif/images/azienda.jpg[/img]Azienda[*][img]/themes/cif/images/servizi_finanziari.jpg[/img]Servizi finanziari
[*][img]/themes/cif/images/lavoraconnoi.jpg[/img]Lavora con noi[*][img]/themes/cif/images/norme.jpg[/img]Norme e leggi[*][img]/themes/cif/images/partners.jpg[/img]Partners[*][img]/themes/cif/images/areariservata.jpg[/img]Area riservata[/list]
                            </div>
                       </div>

                       <div id="center">
                           <div id="sponsor">
                                <div id="sponsor_container">
                                     [img]/themes/cif/images/happy.png[/img]
                                </div>
                           </div>

                            <div class="body">
  <h1>Gestione produttori</h1>

  
<div id="Sidebar" class="typography">
	<div class="sidebarBox">
 		
  		<ul id="Menu2">
		  	
  	    		
		  			[*]<span>Gestore contenuti</span>
					  
	  		
	  			 
			 
  			
  	    		
		  			[*]<span>Gestione produttori</span>
					  
	  		
	  			
	  				
				 
			 
  			
  	    		
		  			[*]<span>Logout</span>

					  
	  		
	  			 
			 
  			
  		[/list]
		</div>

</div>
  <div style="clear:left">
     
        a

     
        xxx

     
        Pinco


     
  </div>
</div>
                       </div>
                  </div>

                  <div id="orangebar">&#160;</div>
             </div>
             <div id="bottomshadow">&#160;</div>
        </div>
                  <div id="footer"></div>

  </body>

ad un certo punto si vede il div con l'id SideBar, che racchiude sidebar box eccetera. Più sotto si può vedere una div che racchiude 3 righe: a, xx e pinco

Queste righe dovrebbero stare sotto la sidebar più piccolina, invece vengono posizionate sotto al menu di navigazione (div id navigator).

Ecco che posto un'immagine.
La freccia rossa indica dove effettivamente voglio che il testo appaia.

**gengix** · 27-03-2008, 09:15

Se posti solo il codice di struttura nn so come aiutarti, devi postare anche il codice css.

**Hysoka** · 27-03-2008, 11:38

questo è il mio css

codice:

body
{
  background: url(../images/background.jpg) repeat 0 0;
  padding: 0 4em 0 4em ;
}

div#wrapper
{
  margin:auto;
  width:80%; 
}

div#light
{
  width: 100%;margin: 0 auto;text-align: left;
  background: url(../images/background_light.jpg) repeat top left
}

div#orangebar
{
  width:100%;
  height:20px;
  background-color:#ffb047;
  border-bottom:1px #f58c00 solid ;
  clear:left;
}

div#bottomshadow
{
  width:100%;
  height:25px;
  background: url(../images/bottom_shadow.jpg) repeat-x 0 0
}

div#innerwrapper
{
    margin:0px 20px 0px 20px;

}

div#topmenubar
{
  width:100%;
  height:27px;
  background: url(../images/top_menubar.jpg) repeat-x 0 0;
  border:1px solid black;
  border-top:0px;
}

ul.primary-links
{

  margin: 0;
  padding: 0;
  float: right;
  position: relative;
  z-index: 4;
  height:27px;
}

ul.primary-links li {
  margin: 0;
  padding-top: 8px;
  text-align:center;
  float: left;
  background-image: none;
  list-style-type: none;
  list-style-image: none;
  border:0;
}

ul.primary-links li a, ul.primary-links li a:link, ul.primary-links li a:visited, ul.primary-links li a:hover {
  display: block;
  font-family:Trebuchet MS, Verdana, sans-serif;
  text-decoration:none;
  font-size:11px;
  color: #000000;
  background: transparent url(../images/tab.png) no-repeat 0 0;
  width:110px;
  height:20px;
  padding-left:2px;
}

div#center
{
  position:relative;
  margin-left:24.5%;
}

div#sponsor
{

  border:1px solid black;
  border-top:0;
  background:#ffffff;
}


div#sponsor_container
{
  text-align:center;
  padding:0.5em 0.5em 0.5em 0.5em;
}

div#navigator
{
  width:24%;
  background:#ffffff;
  text-align:center;
  float:left;
  border:1px solid black;
  border-top:0px;
  padding-top:1em;
  padding-bottom:1em;
  margin-bottom:1em;
}

div#nav_container
{
  margin:auto;
  text-align:left;
  margin-left:1em;
}

ul#nav
{
  margin:0;
  padding:0px;
  z-index: 4;
}

ul#nav li
{
  margin:0;
  padding:0px;
  list-style:none;
  height:55px;
  margin-bottom:1em;

}

ul#nav li a, ul#nav li a:link, ul#nav li a:visited, ul#nav li a:hover
{
  display:block;
  margin-left:60px;
  font-family:Trebuchet MS, Verdana, sans-serif;
  font-size:15px;
  color:#0000ff;
  text-decoration:none;
  position:relative;
  top:18px;
  background: url(../images/nav_bg.jpg) repeat-y top left;
  padding-left:5px;
}

div.body
{
  margin-top:5px;
  background: url(../images/body_inner_shadow.jpg) repeat-x top left #ffffff;
  border:1px solid black;

  margin-bottom:1em;
  font-family: Verdana, sans-serif;
  font-size:11px;
  padding:1em;
  color:#000000;
}

h1
{
  color:#000000;
  font-weight:bold;
  background:url(../images/title_bg.jpg) repeat-y top left;
  padding:5px;
  margin-bottom:15px;

  font-family: Trebuchet ms,Verdana, sans-serif;
  display:block;
}

div#footer
{
  color:#555555;
  font-family: Trebuchet ms,Verdana, sans-serif;
  font-size:12px;
  text-align:center;
  margin:auto;
}

h2
{
    font-family: Trebuchet ms,Verdana, sans-serif;
    font-size:20px;
}

a
{
  font-family:Trebuchet MS, Verdana, sans-serif;
  color:#ff5500;
  text-decoration:none;
}

ul.menu
{
  margin-bottom:1em;
}

la sidebar è gestita da un css del cms. Potrei anche postarlo, ma è lungo e confusionario.

**gengix** · 28-03-2008, 09:17

Ciao, scusami se ti rispondo solo adesso ma il tempo in questi giorni è scarso.

Prova a tirare via lo stile che hai dichiarato in linea con la proprietà clear:left.
Il div dovrebbe posizionarsi dove vuoi te.

Fammi sapere

**Hysoka** · 29-03-2008, 11:29

ciao,
purtroppo togliendo clear:left il div mi viene posizionato accanto alla sidebar, e non sotto.
Questi css mi faranno cadere i capelli a terra

**gengix** · 29-03-2008, 14:48

Non è molto semplice andare accanto al tuo codice, anche perchè nel css che hai riportato, molte classi non sono dichiarate, come avevi detto te c'è dell'altro css che non hai postato.
Cmq tirando via il clear:left il risultato che mi appare è rappresentato nell'immagine che allego.
A me sembra che dalla tua richiesta iniziale fosse quello che volevi.

Discussione: div addossati a sinistra e clear

Strumenti discussione

Ricerca discussione

Visualizza

div addossati a sinistra e clear

Permessi di invio