Foros del Web » Creando para Internet » CSS »

problema con floats y divs

Estas en el tema de problema con floats y divs en el foro de CSS en Foros del Web. hola a todos tengo el siguiente problema, tengo la sigueinte estructura HTML, tan solo dos simples divs uno hara de menu lateral el otro de ...
  #1 (permalink)  
Antiguo 19/11/2009, 12:01
 
Fecha de Ingreso: junio-2008
Ubicación: Colombia
Mensajes: 207
Antigüedad: 9 años, 5 meses
Puntos: 12
problema con floats y divs

hola a todos tengo el siguiente problema, tengo la sigueinte estructura HTML, tan solo dos simples divs uno hara de menu lateral el otro de contenido, a su vez el de contenido posee una <ul> para crear unas pestañas y un div para mostrar la informacion de cada pestaña, hasta aca sin aplicar ningun float la pagina se ve de la siguiente manera:



Despues de aplicar un float al cuadro de borde rojo, sucede lo siguiente



El ul de las pestañas subio y el div de contenido se puso por debajo del borde inferior del cuadro rojo, y no he podido saber la razon para ello, no soy muy bueno con floats asi que si pueden orientarme les agradeceria, adjunto codigo css y html

HTML
Código PHP:
<div id="container">    
    <
div id="barra-menu">        
        <
ul>
            <
li>Link 1</li>
            <
li>Link 2</li>
            <
li>Link 3</li>
        </
ul>                
    </
div>
    
    <
div id="info">    
        <
div id="tabContainer">
            <
ul class="menuTabs">
                <
li id="datosBasicos" class="activo">Datos basicos</li>
                <
li id="contacto">Contacto</li>
                <
li id="infComercial">Informacion comercial</li>            
                <
li id="sistCalidad">Sistema calidad</li>
            </
ul>
            <
span class="clear"></span>
            
            <
div id="divDatosBasicos" class="contenido datos-basicos">
                
Lorem ipsum dolor sit ametconsectetur adipiscing elitEtiam et feugiat sapien
                
Nulla lobortis blandit tortor at commodoUt fringillaneque eget mattis vehicula
                
leo turpis auctor orcivel tempor metus orci ac quamPhasellus sagittis suscipit est

            </
div>
        </
div>
    </
div>
</
div
CSS
Código PHP:
.clear{  
   
clearboth;  
   
height0;        
   
displayblock;  
}


#tabContainer ul.menuTabs li{ 
  
floatleft;  
  
margin-right5px;    
  
padding5px 10px 5px 10px;  
  
background:  #efefef;  
  
margin-bottom: -1px;  
  
border1px solid  #d0ccc9;  
  
border-width1px 1px 1px 1px;  
  
positionrelative;  
  
color:  #898989;  
  
cursorpointer;  
}

.
contenido{        
      
background:  #efefef;        
      
border1px solid  #d0ccc9;  
      
text-alignleft;  
      
padding10px;       
      
font-size11px;  
}    
  
.
contenido.datos-basicos{  
      
displayblock;  
}  


#barra-menu{
   
border1px solid red;
   
float:left;
   
width160px;
   
line-height18px;

   
#info{
   
margin-left160px;            

Mi duda es con los floats o el clear creo que el problema es por ahi pero no estoy seguro.

Gracias de antemano, saludos
  #2 (permalink)  
Antiguo 19/11/2009, 12:21
Avatar de David
Moderador
 
Fecha de Ingreso: abril-2005
Ubicación: In this planet
Mensajes: 15.711
Antigüedad: 12 años, 7 meses
Puntos: 833
Respuesta: problema con floats y divs

Eso sucede debido a ese <span> que tienes ahí (clear: both).

Podrías intentar usar display: inline para mostrar los "tabs" en una misma línea en lugar de flotarlos. Así puedes quitar ese <span>.
__________________
Por favor, antes de preguntar, revisa la Guía para realizar preguntas.
  #3 (permalink)  
Antiguo 19/11/2009, 14:20
 
Fecha de Ingreso: junio-2008
Ubicación: Colombia
Mensajes: 207
Antigüedad: 9 años, 5 meses
Puntos: 12
Respuesta: problema con floats y divs

funciona perfecto man mil gracias!
Saludos.
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 08:35.