Problema con DIV

mcastell · #1 (**permalink**) 16/08/2011, 02:14

Hola a tod@s! La verdad que siempre he resuelto mis dudas buscando entre las consultas de los demás por el foro, pero esta vez.. No consigo solucionarlo.

Tengo un contenedor (.all-content) que alberga dos DIVS (.content-pri y #right) que a la vez esta (#.content-pri) contiene dos más. La idea es dejar .content-pri a la izquierda y #right a la derecha con float

Código HTML:

 <div class="all-content">

				<div class="content-pri">

					<div id="principal">
						<div class="header-content">
						</div>
						<div id="content">
	
						</div>
					</div>
								
					<div class="content-table">		
						<div id="notes">
							<div class="header-table">
                                                        
							</div>
						</div>

						<div id="last-articles">
							<div class="header-table">
                                                            
							</div>			
						</div>
					</div>		
				
				</div>
			
				<div id="right">		
							
				</div>
	
			</div>

CSS:

Código HTML:

#principal {
    background-color: #C4B498;
    margin: 0px 40px 20px 0px;
    width: 607px;
    height: 100px;
}

#right {
    width: 233px;
    height: 100px;
    border: solid 1px #fff;
    float: right;
}

.content-pri {
    width: 607px;
    border: solid 1px #fff;
    vertical-align: top;
}

.content-table {
    margin: 0;
    width: 606px;
    height: 100px;
}

.all-content {
    border: solid 1px #fff;
    margin: 20px 40px 20px 40px;
    width: 860px;
    position: relative;
}

Tal y como he pegado el código, me situa la capa #right a la derecha pero.. En la parte inferior fuera del contenedor. Si añado la propiedad float: left; a la capa .content-pri, parece que no respete el espacio ni tamaño de la capa contenedor.

¿Alguna idea? Supongo que me habré hecho un lío tanto capa dentro de capa y debe ser una tontería.

Gracias de antemano.

Batan · #2 (**permalink**) 16/08/2011, 03:18

Yo añadi el float: left a tu .content-pri

y con tu #right{float: left;} quedaria asi

Y con tu #right{float: right} quedaria asi

Que problema tienes entonces?

Saludos

mcastell · #3 (**permalink**) 16/08/2011, 03:45

Ya lo había probado, se posiciona por encima de la capa right y de otra capa llamada #footer que le sigue. Y he hecho tal como has puesto, en un documento html aparte y funciona. Creo que ya se cual es el problema debe ser por los tamaños de la template, es decir, la suma del contenido es más grande que el contenedor, lo pruebo y te comento.

Gracias por tu temprana respuesta,

un saludo.

P.D.: Aquí está el código completo, los jdoc:include es por la posición de los módulos ya que estoy haciendo un template para joomla.

Código HTML:

<body>
	<!-- Comienzo capa de la imagen de fondo -->
	<div class="header-background">	

		<!-- Comienzo capa top -->
		<div id="top">
			<div class="content-top">
				<!-- Comienzo capa traduccion -->
				<div id="translate"><jdoc:include type="modules" name="translate"   style="xhtml" />TRANSLATE</div>
				<!-- Fin capa traduccion -->

				<div class="content-top-right">
					<!-- Comienzo capa perfil -->
					<div id="my_profile"><jdoc:include type="modules" name="profile"   style="xhtml" />MY PROFILE</div>
					<!-- Fin capa perfil -->

					<!-- Comienzo capa topmenu -->
					<div id="topmenu"><jdoc:include type="modules" name="topmenu"  style="xhtml" />TOPMENU</div>
					<!-- Comienzo capa topmenu -->
				</div>
			</div>
		</div>
		<!-- Fin capa top -->


		<!-- Comienzo capa body -->
		<div id="body">

			<!-- Comienzo capa header -->
			<div id="header">
			</div>
			<!-- Fin capa header -->

			<!-- Comienzo breadcumb -->
	 		<div id="breadcrumb">
				<div id="search">
					<jdoc:include type="modules" name="search" style="xhtml" />SEARCH
				</div>		
			</div>
			<!-- Fin capa breadcumb -->
	
			<!-- Comienzo capa all-content -->
			<div class="all-content">

				<!-- Comienzo contenedor de contenido -->
				<div class="content-pri">
					<!-- Comienzo contenido -->
					<div id="principal">
						<div class="header-content">
						</div>
						<div id="content">
							<jdoc:include type="component" />
						</div>
					</div>
					<!-- final content -->	

					<!--footer content -->
					<div class="content-table">		
						<div id="notes">
							<div class="header-table">
                                                           <jdoc:include type="modules" name="footer-content1" style="xhtml" />
							</div>
						</div>

						<div id="last-articles">
							<div class="header-table">
                                                            <jdoc:include type="modules" name="footer-content2" style="xhtml" />
							</div>			
						</div>
					</div>		
					<!-- fin footer content -->		
				</div>
				 <!--Final contenedor de contenido -->
			
				<!-- Comienza columna derecha -->
				<div id="right">		
					<jdoc:include type="modules" name="right" style="xhtml" />		
				</div>
				<!-- Fin columna derecha -->
			</div>
			<!-- FIn capa all-content -->

			<!-- Comienza footer -->
			<div id="footer">
                            <div class="footer-pri">
                                <div class="help-support">
                                    <jdoc:include type="modules" name="help-support" style="xhtml" />help-support
                                </div>
                                <div class="follow">
                                    <jdoc:include type="modules" name="follow" style="xhtml" />follow
                                </div>
                                <div class="partners">
                                    <jdoc:include type="modules" name="partners" style="xhtml" />partners
                                </div>
                                <div class="others-links">
                                    <jdoc:include type="modules" name="others-links" style="xhtml" />others-links
                                </div>
                            </div>
                            <div class="footer-copy">
                                <div class="copyright">
                                    <jdoc:include type="modules" name="copyright" style="xhtml" />COPYRIGHT
                                </div>
                            </div>
			</div>
			<!-- Fin footer -->


		</div>
		<!-- Fin capa body -->

	</div>
	<!-- Fin capa de la imagen de fondo -->

</body>

CSS:

Código HTML:

* { 
    padding: 0;
    margin: 0;
}

BODY {
    background-color: #fff;
    background-image: url(../images/background-body.png);
    background-repeat: repeat-x;
    font-family: LucidaSans Unicode, Lucida Grande, sans-serif;
    font-size: 12px;
}

.header-background {
    background-image: url(../images/background-head.png);
    background-repeat: repeat-x;
    z-index: 0;
    width: 100%;
    height: 279px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
} 

#top {
    background-image: url(../images/background-top.png);
    background-repeat: repeat-x;
    width: 100%;
    height: 40px;
    z-index: 1;
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    margin: 0;
    padding: 0;
    color: #fff;
}


#body {
    background-image: url(../images/backgroundcontent.png);
    background-repeat: repeat-y;
    width: 940px;
    margin: 0 auto;
}


#header {
    background-image: url(../images/logo.png);
    background-repeat: no-repeat;
    width: 900px;
    position:relative;
    height: 189px;
    margin: 0 auto;
}

#breadcrumb {
    background-image: url(../images/bg-breadcrumb.png);
    background-repeat: no-repeat;
    width: 900px;
    position:relative;
    height: 30px;
    margin: 0 auto;
}

.header-content {
    background-image: url(../images/headercontent.png);
    background-color: #C4B498;
    width: 607px;
    height: 17px;
    position:relative;
    top: 0;
    left: 0;
    right: 0;
    margin: 0;
    padding: 0;
}

#principal {
    background-color: #C4B498;
    margin: 0px 40px 20px 0px;
    width: 607px;
    height: 100px;
}

#right {
    width: 233px;
    height: 100px;
    border: solid 1px #fff;
}

.content-pri {
    width: 607px;
    float: left;
}

.content-table {
    margin: 0;
    width: 606px;
    height: 100px;
}

#notes {
    background-color: #C4B498;
    width: 293px;
    height: 100px;
    float: left;
}

#last-articles {
    background-color: #C4B498;
    width: 293px;
    height: 100px;
    float: right;
}

.header-table {
    background-image: url(../images/headertable.png);
    background-color: #C4B498;
    width: 293px;
    height: 19px;
    position:relative;
    top: 0;
    left: 0;
    right: 0;
    margin: 0;
    padding: 0;
}

#translate {
    width: 198px;
    height: 39px;
    float: left;
    text-align: center;
    padding-top: 10px;
    vertical-align: top;
    font-size: 12px;
    font-weight: bold;
}

.content-top-right {
    width: 922px;
    height: 39px;
    float: right;
}

.content-top {
    height: 39px;
    width: 1120px;
    float: left;
    top: 0;
    left: 0;
    right: 0;
    margin: 0;
    padding: 0;
}

#my_profile {
    height: 39px;
    float: left;
    padding-top: 10px;
    margin-left: 77px;
    vertical-align: top;
    font-size: 12px;
    font-weight: bold;
}

#topmenu {
    height: 39px;
    float: right;
    padding-top: 10px;
    margin-right: 21px;
    vertical-align: top;
    font-size: 12px;
    font-weight: bold;
}

#search {
    height: 30px;
    margin-right: 21px;
    float: right;
    padding-top: 6px;
}

.all-content {
    margin: 20px 40px 20px 40px;
    width: 860px;
    position: relative;
}

#footer {
    background-image: url(../images/footer.png);
    width: 900px;
    height: 209px;
    margin: 0 auto;
}

.footer-pri{
    width: 900px;
    height: 136px;
}

.help-support{    
    padding: 33px 10px 0 10px;
    width: 189px;
    height: 136px;
    float: left;
}

.follow{
    padding-top: 33px;
    width: 394px;
    height: 136px;
    float: left;
}

.partners{
    padding-top: 33px;
    width: 158px;
    height: 169px;
    float: left;
}

.others-links{
    padding-top: 33px;
    width: 139px;
    height: 136px;
    float: left;
}

.footer-copy{
    width: 900px;
    height: 40px;
}

.copyright {
    margin: 15px 10px 5px 0;
    float: right;
    color: #C4B498;
    font-size: 9px;
    font-weight: bold;
}

mcastell · #4 (**permalink**) 16/08/2011, 04:17

He hecho las pruebas pero.. No xD. No consigo solucionarlo

Batan · #5 (**permalink**) 16/08/2011, 04:36

Añadale

Cita:

display: inline-block;

Al #footer haber que tal.

Saludos

mcastell · #6 (**permalink**) 16/08/2011, 04:49

Perfecto solucionado! Muchísimas gracias! Voy a documentarme sobre la propiedad display que la desconocía jeje.

Gracias de nuevo,

saludos.