[SOLUCIONADO] Juntar un div con otro

[RaulCDT]

Quiero que no quede espacio entre un div y otro..

Que deberia de añadirle a este:

Código:

#side1 {
    float: right;
    width: 325px;
	background: #000;
	height:330px;
}


#content1 .side1 {
    float: right;
    width: 325px;
    background: #000;
	height:330px;
}

[heinzy]

Hola

seguramente te falta poner display: inline

prueba a ponerle a cada uno border: 1px solid black así veras el borde y podrás saber el motivo de la separación y se te hara mas fácil la comprensión de lo q sucede.

salu2

[pzin]

heinzy en elementos flotados siempre se computará display como elemento de bloque.

RaulCDT ahí falta más código que mostrar, ya que tal cual está se comporta de tal forma que quedan pegados.

[RaulCDT]

A ver tengo la estructura esta:
BLoque 1 que tiene parte izquierda y parte derecha:

Código:

#content .main {
    float: left;
    width:670px;
    background: #FFF;
    min-height: 330px;

}
#home-events div.show {
    display:block;
}

#side {
    float: right;
    width: 325px;
	background: #000;
	height:330px;
}


#content .side {
    float: right;
    width: 325px;
    background: #000;
	height:330px;
}
#landings {
    clear: both;
}

#landings li {
    padding: 5px;
    font-size: 12px;
}

#landings li {
    min-height: 55px;
    background: #222;
    margin: 5px 0;
}


#landings li img {
    float:left;
}

#landings li a {
    float:left;
    font-size: 13px;
    width: 205px;
    padding-left: 30px;
}

Y luego este otro que es el bloque2 que esta justo debajo del 1

Código:

#home1-events1 ul span.data a {
    width:150px;
}

#listas .main1, #listas .home1 {
    float: left;
    width:670px;
    background: #FFF;
    min-height: 330px;

}
#home1-events1 div.show {
    display:block;
	
}

#side1 {
    float: right;
    width: 325px;
	background: #000;
	height:330px;
}


#content1 .side1 {
    float: right;
    width: 325px;
    background: #000;
	height:330px;
}
#home1-events1 ul {
    margin-top: 20px;
}

Entre conten main y listas main1 si se pega el uno con el otro pero entre el side y side1 no se pega el uno con el otro tiene un espacio entre ambos..

la estructura es asi:

Bloque 1 ( content main | side)
Bloque2 ( listas main1 |side1)

EN EL HTML LO TENGO ASÍ:

Código HTML:

<div id="content" class="wrapper">

<div class="main">
<div id="home-events">
            <div class="show">
              <img src="" alt="" id="secuencia1" onmouseover="img1.Secuencia('stop')" onmouseout="img1.Secuencia('start')"></div> 
</div></div>

<div id="side">
<div>
  <h2 class="textouss">TITULO</h2><div id="acceso" class="clientepass"> <form action="clientes/control.php" method="post"> 
<br>
Usuario:
<input type="text" size="10" name="usuario" />
Pass: 
      <input type="password" size="10" name="pass" />
      <input type="submit" name="boton" value="entrar" style="height:17px" /> 
      </form>
<br>
¿Olvidaste la contraseña? | ¡Dáte de ALTA!</div>
</div>
        <div id="landings">
            <h2 class="textouss">Noticias</h2>
            <ul><li><img src="jpg" class="fromdb" alt=""/><a title="" href="http://www.">Noticia 1</a></li><li><img src="jpg" class="fromdb" alt=""/><a title="" href="http://www">Noticia 2</a></li></ul> </div>
    </div>
<div class="clear"></div>

 <div id="listas" class="wrapper">
 <div class="main1">
 <div class="home1-events1">
 
<div class="show">
<h2>Info detallada fiestas de hoy</h2>
<ul class="columnas">
<li><a href="http://www." title=""><img src="murcia/crazy1.jpg" width="180" height="180" class="fromdb inhome rounded-3" alt=""/></a></li>
<li><a href="http://www." title=""><img src="murcia/crazy1.jpg" width="180" height="180" class="fromdb inhome rounded-3" alt=""/></a></li>
<li><a href="http://www." title=""><img src="murcia/crazy1.jpg" width="180" height="180" class="fromdb inhome rounded-3" alt=""/></a></li>
<li><a href="http://www." title=""><img src="murcia/crazy1.jpg" width="180" height="180" class="fromdb inhome rounded-3" alt=""/></a></li>
<li><a href="http://www." title=""><img src="murcia/crazy1.jpg" width="180" height="180" class="fromdb inhome rounded-3" alt=""/></a></li>
<li><a href="http://www." title=""><img src="murcia/crazy1.jpg" width="180" height="180" class="fromdb inhome rounded-3" alt=""/></a></li>
</ul>
</div></div></div>
</div></div>
<div id="side1"></div> 

[pzin]

Pero entonces tienes una flotado a la izquierda y otra a la derecha ¿no? Entonces es normal que cuando el ancho sea mayor se cree un espacio.

De todas formas si lo tienes subido a algún sitio igual se ve mejor que así tal cual.

[RaulCDT]

No aun no lo tengo subido! pero si lo tengo el bloque 2 flotante izq y dcha como si fuesen dos columnas

[pzin]

Bueno, pero entonces el problema real es que quieres que el elemento de la izquierda ocupe todo el ancho restante, ¿no?

Si es así puedes usar o bien width: calc(100% - 325px) para el elemento de la izquierda, para que ocupe todo el ancho menos el ancho de ese elemento lateral o cambiar el markup y hacer algo parecido a:

Código HTML:

<aside></aside>
<article></article>
 

Código css:

article {
  overflow: auto;
}
 
aside {
  float: right;
  width: 325px;
}
 

Nótese que tienen las posiciones intercambiadas en el HTML.

O si no quieres que ocupe todo el ancho, entonces debes de flotar ambos elementos al mismo lado.

[RaulCDT]

El ancho si me lo ocupa, lo que no me junta es el alto, es decir,

side con side 1

|content main|side|
| listas main1|side1|

[RaulCDT]

He subido un enlace donde he subido la pagina... y bueno si ves en la parte derecha la parte negra y blanca no se juntan.. y quiero que midan lo mismo que en la parte izquierda.

Despues quiero hacer un bloque abajo donde esta Info detallada de fiestas que ocupe el ancho entero que son 995px

[URL="http://www.crazymurcia.com/v1.0/"]http://www.crazymurcia.com/v1.0/[/URL]

[RaulCDT]

En la estructura web por ejemplo sin datos dentro de cada div, es decir, vacia no se corta, pero cuando le meto texto ya se desconfigura y no consigo adivinar el porque..

la estructura es la siguiente:

Código HTML:

<div id="header" class="cm_web">
 
<div id="top"></div>
<div style="position: absolute; top: 5px; left: 811px;"></div>
<div id ="menu"><ul class="desplegable">
      <li><a href="#">Inicio</a></li>
      <li><a href="#">Clubs</a>
      </li>
      <li><a href="#">Fiestas</a>
      </li>
      <li><a href="#">Fiestas Privadas</a></li>
      <li><a href="#">Conciertos</a> 
      </li>
      <li><a href="#">¿Buscas Trabajo?</a></li>
      <li><a href="#">Contactar</a></li>
    </ul>
</div>
<div id="bloque" class="cm_web">
<div class="izq">
 
            <div class="show"></div> 
</div>
 
<div id="lado_derecho">
</div>
     
    </div></div>
 
 <div id="bloque" class="cm_web">
 <div class="izq">
 
<div class="show">
<h2>Info detallada fiestas de hoy</h2>
 
</div></div>
 
<div id="lado_derecho_fiestas"></div>
 
</div>
 
</div>
</div>
 

y el .css

Código CSS:

.cm_web {
    width: 995px;
    height: auto;
    margin: 0 auto;
    clear: both;
}
 
#header {
    position:relative;
 
}
 
 
/*top*/
#top {
    padding-top:10px;
    height:92px;
    overflow:hidden;
}
#top .addthis {
    float: left;
    width: 995px;
}
 
/*publicidad*/
 
#bloque .izq {
    float: left;
    width:670px;
    background: #FFF;
    min-height: 330px;
 
}
#izq div.show {
    display:block;
}
#izq ul span.data a {
    width:150px;
}
 
#izq ul {
    margin-top: 20px;
}
#lado_derecho {
    float: right;
    width: 325px;
    background: #000;
    height: 330px;
}
 
#lado_derecho_fiestas {
    float: right;
    width: 325px;
    background: #FFF;
    min-height: 450px;
}
#bloque .lado_derecho_fiestas {
    float: right;
    width: 325px;
    background: #fff;
    min-height:450px;
}
#bloque .lado_derecho {
    float: right;
    width: 325px;
    background: #000;
    min-height:330px;
}
 

Porque el .lado_derecho no se junta con el .lado_derecho_fiestas

[RaulCDT]

He visto en otro post algo sobre el <div class="clear"></div> eso me valdría o resolveria algo?

[pzin]

Iniciado por RaulCDT

He subido un enlace donde he subido la pagina... y bueno si ves en la parte derecha la parte negra y blanca no se juntan.. y quiero que midan lo mismo que en la parte izquierda.

Seguramente así se pueda ver mejor qué pasa. Ahora lo que no entiendo es lo que falla, faltan más indicaciones. Siendo todo blanco y negro y habiendo muchas derechas e izquierdas no ubico el error al que haces referencia.

Skitch suele ayudar con estas historias.