• Resolvido marcelolz

    (@marcelolz)


    Olá!

    Isso envolve o plugin Eletro Widgets (http://eletrowidgets.hacklab.com.br/). Ele permite adicionar widgets nas páginas do wordpress com certa liberdade.

    Ao se adicionar 3 colunas (div), duas delas se sobrepõe. Eu não pude encontrar uma forma de ajusta-las lado a lado, como deve-ser. Talvez um olhar mais afiado possa dizer que há um problema neste CSS, por favor.

    .eletro_widgets_separator {
    clear: both;
    }

    #eletro_widgets_container {
    overflow: hidden;
    }

    div#eletro_widgets_col_0 {
    float: left;
    }

    div#eletro_widgets_col_1 {
    float: right;
    }

    /* Esses são os estilos das colunas e dos itens de cada set de Eletro Widgets. Crie mais conforme necessário */

    /* Estilos para o container 0 (2 colunas)*/
    #eletro_widgets_container_0 div.eletro_widgets_col {
    width: 48%;
    }

    #eletro_widgets_container_0 div.itemDrag {
    width: 100%;
    }
    /* Fim dos estilos para o container 0 */

    /* Estilos para o container 1 (3 colunas)*/
    /* Styles for container 1 (3 columns)*/
    #eletro_widgets_container_1 div.eletro_widgets_col {
    width: 30%;
    }

    #eletro_widgets_container_1 div.itemDrag {
    width: 90%;
    }
    /* Fim dos estilos para o container 1 */

    /* Esses são os estilos dos widgets inseridos no Eletro Widgets.
    /* These are the styles of the widgets inside of Eletro Widgets.

    .eletro_widgets_content {
    border-bottom: 1px dotted #BBBBBB;
    }

    .eletro_widgets_content h2 {
    border-bottom: 1px solid #333333;
    }
    .eletro_widgets_content ul {
    margin: 9px 0 9px 9px;
    padding: 3px 0 0 18px;
    }
    .eletro_widgets_content ul li {
    line-height: 18px;
    }

Visualizando 3 respostas - 1 até 3 (de um total de 3)
  • Sem ver o html é meio complicado e sem contar que outras coisas podem estar influenciando essa parte do layout, mas vamos tentar.

    Verifique o float:right;, coloque todas com float: left;

    Por padrão as colunas todas em float: left; deveriam ficar uma ao lado da outra e se não tiver mais espaço ela é jogada para baixo.

    Neste caso o float: rigrh; pode estar atrapalhando.

    Verifique também os espaços em porcentagem de cada div, se alguma div estiver com padding a porcentagem delas deve ser diminuída para compensar o padding adicional.

    Criador do tópico marcelolz

    (@marcelolz)

    Myst1010, mesmo com minhas informações incompletas, você disse falou a coisa certa. Obrigado!

    Para registro, se a alguém interessar possa, as divs ficaram assim. Faltava também adicionar uma outra coluna:

    div#eletro_widgets_col_0 {
    float: left;
    }

    div#eletro_widgets_col_1 {
    float: left;
    }

    div#eletro_widgets_col_2 {
    float: left;
    }

    Que bom que vc conseguiu descobrir o problema.

    vc também pode fazer assim pra simplificar

    div#eletro_widgets_col_0,
    div#eletro_widgets_col_1,
    div#eletro_widgets_col_2 {
        float: left;
        }

    Ou se vc tiver como adicionar uma class nessas div’s adiciona a mesma para todas e faz só o float: left; pra ela.

    Bom, como o tópico teve solução finaliza o tópico como resolvido ok.

    abraços.

Visualizando 3 respostas - 1 até 3 (de um total de 3)
  • O tópico ‘Eletro Widgets: problema com três colunas’ está fechado para novas respostas.