Comunidad de diseño web y desarrollo en internet online

ambas columnas del mismo largo.

Citar            
MensajeEscrito el 23 Mar 2012 04:50 pm
me pasa esto en mi blog que quiero tener ambas columbas del mismo largo, o sea que la de la derecha no se corte cuando no haya mas contenido. y no le puedo poner ningun largo especifico porque depende de las entradas. como puedo modificar esto?



Código HTML :

#sidebar-wrapper { 
  width: 260px; 
  float: right; 
  background-color: #252429; 
  margin: 0; 
  padding: 0; 
  border-left: 1px solid $borderColor; 
  border-bottom: 1px solid $borderColor; 
  display: inline;       /* fix for doubling margin in IE */ 
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ 
  overflow: visible;      /* fix for long non-text content breaking IE sidebar float */ 
} 

#sidebar-wrapper-content{ 
    width:100%; 
}  

Por canicanor

3 de clabLevel



 

chrome
Citar            
MensajeEscrito el 23 Mar 2012 05:07 pm
Al contenedor de ambas columnas le pones display: table y luego a cada columna le pones display: table-row.

en teoría debería funcionar aunque no lo he probado.

saludos

Por HtrMancera

Claber

342 de clabLevel

1 tutorial

Genero:Masculino  

Front-end Developer

chrome
Citar            
MensajeEscrito el 23 Mar 2012 05:29 pm
Es casi como dice HtrMancera, casi...

Encierra los elementos #sidebar-wrapper y #sidebar-wrapper-content con un div al cual le das atributo:
display: table-row;
Y luego a este último lo encierras en otro div con atributo:
display: table;
Finalmente a tus columnas #sidebar-wrapper y #sidebar-wrapper-content, le quitas los floats y le pones:
display: table-cell;

Es decir, haces una tabla con divs ;).

La desventaja es que pierdes los margins de las columnas así que tendrás que espaciarlas con padding, lo cual puede molestar si le pones un background.

Por DriverOp

Claber

2510 de clabLevel



 

opera
Citar            
MensajeEscrito el 24 Mar 2012 05:12 am
cambio pero no es lo que yo decia, o sea quedó así:





como que se cortaron los laterales de donde van las entradas. mas o menos entiendo un poco de html pero ahora si estoy bloqueadisima con esto.

Por canicanor

3 de clabLevel



 

chrome
Citar            
MensajeEscrito el 24 Mar 2012 12:37 pm
Necesitamos el código real de la página que estás haciendo ¿puedes poner la URL del sitio?.

Por DriverOp

Claber

2510 de clabLevel



 

opera
Citar            
MensajeEscrito el 24 Mar 2012 04:11 pm

Código HTML :

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
  <head>
    <b:include data='blog' name='all-head-content'/>
    <title><data:blog.pageTitle/></title>
    <b:skin><![CDATA[/*

/********** REMOVE THIS WHOLE BLOCK TO SHOW THE BLOGGER NAVBAR ************
      **                                                                       **
      **/     #navbar-iframe {height:0px;visibility:hidden;display:none}      /**
      **                                                                       **
      ***************************************************************************

-----------------------------------------------
Blogger Template Style
Name:     Denim
Designer: Darren Delaye
URL:      www.DarrenDelaye.com
Date:     11 Jul 2006
-----------------------------------------------
*/

/* Variable definitions
   ====================
 <Variable name="bgColor" description="Page Background Color"
           type="color" default="#efefef" value="#1A1B1F">
 <Variable name="textColor" description="Text Color"
           type="color" default="#ffffff" value="#666666">
 <Variable name="linkColor" description="Link Color"
           type="color" default="#336699" value="#46a363">

 <Variable name="headerBgColor" description="Page Header Background Color"
           type="color" default="#ffffff" value="#1A1B1F">
 <Variable name="headerTextColor" description="Page Header Text Color"
           type="color" default="#ffffff" value="#ffffff"> 
 <Variable name="headerCornersColor" description="Page Header Corners Color"
           type="color" default="#528bc5" value="#1A1B1F">

 <Variable name="mainBgColor" description="Main Background Color"
           type="color" default="#ffffff" value="#FFFFFF">
 <Variable name="borderColor" description="Border Color"
           type="color" default="#ffff00" value="#000000">
 <Variable name="dateHeaderColor" description="Date Header Color"
           type="color" default="#999999" value="#666666">

 <Variable name="sidebarTitleBgColor" description="Sidebar Title Background Color"
           type="color" default="#252429" value="#252429">
 <Variable name="sidebarTitleTextColor" description="Sidebar Title Text Color"
           type="color" default="#333333" value="#ffffff">
 
 <Variable name="bodyFont" description="Text Font"
           type="font" default="normal normal 100% Verdana, Arial, Sans-serif;" value="normal normal 95% Trebuchet, Trebuchet MS, Arial, sans-serif">
 <Variable name="headerFont" description="Page Header Font"
           type="font" default="normal normal 210% Verdana, Arial, Sans-serif;" value="normal normal 189% Trebuchet, Trebuchet MS, Arial, sans-serif">

   <Variable name="startSide" description="Start side in blog language"
             type="automatic" default="left" value="left">
   <Variable name="endSide" description="End side in blog language"
             type="automatic" default="right" value="right">
*/


body {
  background: $bgColor;
  margin: 0;
  padding: 0px;
  font: x-small Verdana, Arial;
  text-align: center;
  color: $textColor;
  font-size/* */:/**/small;
  font-size: /**/small;
}

h1, h2, h3 {
   margin: 0;
   text-transform: uppercase;
        text-align: normal;
   font-weight: normal;
   color: #ffffff;
   font-size: 26px;
}
a:link {
  color: $linkColor;
  text-transform: lowercase;  
  text-decoration: none;
}
a:visited {
  color: $linkColor;
  text-transform: lowercase; 
  text-decoration: none;
}
a:hover {
  color: #BD9385;
  text-transform: lowercase; 
  text-decoration: underline;
}
a img {
  border-width: 0;
}

#outer-wrapper { 
  font: $bodyFont;
}

 
/* Form */

form {
   margin: 0;
   padding: 0;
}

fieldset {
   margin: 0;
   padding: 0;
   border: none;
}

legend {
   display: none;
}

input, textarea, select {
   font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
   font-size: 13px;
   color: #333333;
}


/* Header
----------------------------------------------- */
#header-wrapper {
  margin:0;
  padding: 0;
  background-color: $headerCornersColor;
  text-align: $startSide;
}

#header {
  width: 760px;
  margin: 0 auto;
  background-color: $headerBgColor;
  border: 1px solid $headerBgColor;
  color: $headerTextColor;
  padding: 0;
  font: $headerFont;
}

h1.title {
  padding-top: 38px;
  margin: 0 14px .1em;
  text-align: center;
  letter-spacing: 7px;
  line-height: 1.2em;
  font-size: 100%;
}

h1.title a, h1.title a:visited {
  text-transform: uppercase; 
  color: $headerTextColor;
  text-decoration: none;
}

#header .description {
  display: block;
  margin: 0 14px;
  padding: 0 0 40px;
  line-height: 1.4em;
  font-size: 50%;
}
                                                              
/* Content
----------------------------------------------- */

.clear { 
  clear: both;
}


#content-wrapper {
  width: 760px;
  margin: 0 auto;
  padding: 0 0 15px;
  text-align: $startSide;
  background-color: #ffffff;
  border: 1px solid $borderColor;
  border-top: 1px solid $borderColor;
}
#main-wrapper {
  margin-$startSide: 16px;
  width: 464px;
  float: $startSide;
  background-color: #ffffff;
  display: inline;       /* fix for doubling margin in IE */
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;      /* fix for long non-text content breaking IE sidebar float */
}
#sidebar-wrapper {
  width: 260px;
float:right;
  display: table-cell;
  background-color: #252429;
  margin: 0;
  padding: 0;
  border-left: 1px solid $borderColor;
  border-bottom: 1px solid $borderColor;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: visible;      /* fix for long non-text content breaking IE sidebar float */
}

#sidebar-wrapper-content{
   width:100%;
        display: table;
}

/* Headings
----------------------------------------------- */
h2, h3 {
  margin: 0;
}

/* Posts
----------------------------------------------- */
.sidebarTitleBgColor {
  font-weight: normal;
  font-size: 100%;
}
.date-header {
  margin: 1.5em 0 0;
  font-weight: normal;
  text-transform: uppercase; 
  text-align: left;
  color: $dateHeaderColor;
  font-size: 100%;
}
.post {
  margin: 0 0 1.5em;
  padding-bottom: 1.5em;
}
.post-title {
  margin: 0;
  padding: 0;
  font-size: 125%;
  font-weight: bold;
  line-height: 1.1em;
}
.post-title a, .post-title a:visited, .post-title strong {
  text-decoration: none;
  color: $textColor;
  font-weight: bold;
}
.post div {
  margin: 0 0 .75em;
  line-height: 1.3em;
}

.post-footer {
  margin: 0;
  padding-top: 0;
  padding-right: 0;
  padding-bottom: 0;
  padding-left: 20px;
  color: $textColor;
  font-size: 87%;
  background: url(http://i32.tinypic.com/2e0txj6.gif) no-repeat left 3px;
}

.post-footer .span {
  margin-$endSide: .3em;
}

.post img {
  padding: 4px;
}
.post blockquote {
  margin: 1em 20px;
}
.post blockquote p {
  margin: .75em 0;
}

/* Comments
----------------------------------------------- */
#comments h4 {
  margin: 1em 0;
  color: $dateHeaderColor;
}
#comments h4 strong {
  font-size: 110%;
}
#comments-block {
  margin: 1em 0 1.5em;
  line-height: 1.3em;
}
#comments-block dt {
  margin: .5em 0;
}
#comments-block dd {
  margin: .25em 0 0;
}
#comments-block dd.comment-footer {
  margin: -.25em 0 2em;
  line-height: 1.4em;
  font-size: 78%;
}
#comments-block dd p {
  margin: 0 0 .75em;
}

.deleted-comment {
  font-style:italic;
  color:gray;
}

.feed-links {
  clear: both;
  line-height: 2.5em;
}

#blog-pager-newer-link {
  float: $startSide;
 }

#blog-pager-older-link {
  float: $endSide;
 }

#blog-pager {   
  text-align: center; 
 }

/* Sidebar Content
----------------------------------------------- */
.sidebar h2 {
 margin: 1.6em 0 .5em;
 text-transform: uppercase;
 padding: 14px 5px;
 font-size: 100%;
 color: $sidebarTitleTextColor;
}
                                                              
.sidebar ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.sidebar li {
  margin: 0;
  padding-top: 0;
  padding-$endSide: 0;
  padding-bottom: .5em;
  padding-$startSide: 15px;
  text-indent: -15px;
  line-height: 1.5em;
}
.sidebar {
  color: $textColor;
  line-height:1.3em; 
}
.sidebar .widget { 
  margin-bottom: 1em;
}

.sidebar .widget-content { 
  margin: 0 5px;
}


/* Profile 
----------------------------------------------- */
.profile-img { 
  float: $startSide;
  margin-top: 2;
  margin-$endSide: 5px;
  margin-bottom: 5px;
  margin-$startSide: 0;
  padding: 2px;
  border: 1px solid $borderColor;
}

.profile-data {
  margin:0;
  text-transform: uppercase;
  letter-spacing:.1em;
  font-weight: bold;
  color: #FF00FF;
  line-height: 1.6em;
  font-size: 100%;
}

.profile-datablock {
  margin:.5em 0 .5em;
}

.profile-textblock {
  margin: 0.5em 0;
  line-height: 1.6em;
}

                                                              
/* Footer
----------------------------------------------- */
#footer {
  clear: both;
  text-align: center;
  color: $textColor;
}

#footer .widget {
  margin:.5em;
  padding-top: 20px;
  font-size: 85%;
  line-height: 1.5em;
  text-align: $startSide;
}
]]></b:skin>
  </head>

  <body>

  <div id='outer-wrapper'><div id='wrap2'>

    <!-- skip links for text browsers -->
    <span id='skiplinks' style='display:none;'>
      <a href='#main'>skip to main </a> |
      <a href='#sidebar'>skip to sidebar</a>
    </span>

    <div id='header-wrapper'>
      <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='shake up your tired eyes, the world is waiting for you. (cabecera)' type='Header'/>
</b:section>
    </div>
 
    <div id='content-wrapper'>

      <div id='crosscol-wrapper' style='text-align:center'>
        <b:section class='crosscol' id='crosscol' showaddelement='no'/>
      </div>

      <div id='main-wrapper'>
        <b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Entradas del blog' type='Blog'/>
</b:section>
      </div>

      <div id='sidebar-wrapper'>
        <b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='HTML4' locked='false' title='' type='HTML'/>
<b:widget id='Label1' locked='false' title='' type='Label'/>
<b:widget id='BlogArchive1' locked='false' title='' type='BlogArchive'/>
</b:section>
      </div>
    
<div id='sidebar-wrapper-content' style='display: table-row'>
</div>
    </div> <!-- end content-wrapper -->

    <div id='footer-wrapper'>
      <b:section class='footer' id='footer'/>
    </div>

  </div></div> <!-- end outer-wrapper -->


      <!-- spacer for skins that want sidebar and main to be the same height-->
      <div class='clear'> </div>

</body>
</html>
                

Por canicanor

3 de clabLevel



 

chrome
Citar            
MensajeEscrito el 25 Mar 2012 02:52 pm
canicanor:

¿Y la URL del sitio cuál es?.

Nadie más que tú puede probar este código que has puesto porque nos faltan todos los recursos que usas en el código. Por eso he pedido que pongas la URL donde se pueda probar el código.

Por DriverOp

Claber

2510 de clabLevel



 

opera
Citar            
MensajeEscrito el 25 Mar 2012 03:27 pm

Por canicanor

3 de clabLevel



 

chrome
Citar            
MensajeEscrito el 29 Mar 2012 03:32 am
hola?

Por canicanor

3 de clabLevel



 

chrome
Citar            
MensajeEscrito el 29 Mar 2012 06:21 am
Ok, veamos, este es un truquito que aprendí hace un tiempo:

  1. Haces que el overflow del contenedor esté oculto:

    Código :

    #content-wrapper{overflow:hidden}

  2. Empujas la columna que quieres ajustar lo más abajo que CSS permite (500 ems o 9999px) con padding:

    Código :

    #sidebar-wrapper{padding-bottom:500em}

  3. En el mismo elmento, empujas el contenido hacia arriba usando el mismo valor que usaste en el padding, pero como margin negativo:

    Código :

    #sidebar-wrapper{margin-bottom:-500em}



Y listo, con eso la columna se adapta al tamaño de la otra.
Bueno, realmente no se adapta, lo que haces es una columna del tamaño máximo que puede tener el documento y empujas el contenido hacia arriba, pero como el contenedor oculta el sobrante, da la ilusión de que la columna se adapta al mismo tamaño de la otra.

Por The Fricky!

Presidente

6168 de clabLevel

3 tutoriales
8 articulos

Genero:Masculino   Bastard Operators From Hell Héroes

Piccola Venezia...

firefox
Citar            
MensajeEscrito el 05 Abr 2012 02:47 am
uff habia contestado hace un monton pero no se publico. mil gracias ! ahi lo pude arreglar. pero todavia tengo el problema del principio, hacer que la columna de la derecha llegue hasta el final sin tener que llenarla de contenido.

Por canicanor

3 de clabLevel



 

chrome
Citar            
MensajeEscrito el 05 Abr 2012 09:59 am
hablamndo de trucos... sihayla posibilidad de meter el div1 dentro del div2 , el 2 (la columna de la derecha) será siempre tan alta como la de la izquierda... de forma gráfica.

Por Silvestre_

391 de clabLevel

1 tutorial

 

"un simple aficionado", pero acepto propuestas de trabajo

firefox
Citar            
MensajeEscrito el 05 Abr 2012 10:09 am
..hay más opciones, digo esto por los criticos y puristas... ya que podemos usar el contenedor de las dos columnas, y que en la del div2 el fondo sea trasparente.... y más opciones.

Por Silvestre_

391 de clabLevel

1 tutorial

 

"un simple aficionado", pero acepto propuestas de trabajo

firefox

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.