Misaligned

Asked

Viewed 162 times

2

I have these two div

<div class="widget nuvem" style="position: static">
    <h3>Nuvem de Palavras</h3>
        <div class="tags">
            <? foreach($inicial_nuvem as $valor){ ?>
            <div class="tag label btn-info">
                <span><a href="<?=base_url('/blog/categoria/'.$valor->id."/".url_title($valor->categoria))?>" style="color: white;"><? echo $valor->categoria; ?></a></span>
            </div>
            <? } ?>
       </div>
</div>

<div class="widget acervo">
    <h3>Dados de Acervo</h3>
    <ul class="nav">
        <li class="ultimos-artigos">Publicações: <? echo $inicial_acervo[0]->total_posts; ?></li>
        <li class="ultimos-artigos">Categorias: <? echo $inicial_acervo[0]->total_categorias; ?></li>
        <li class="ultimos-artigos">SubCategorias: <? echo $inicial_acervo[0]->total_subcategorias; ?></li>
    </ul>
</div>

But in the css it superimposes one another, as in the image below:

inserir a descrição da imagem aqui

How to resolve this issue?

This is the css:

.widget {
    margin-bottom: 60px;
    padding-left: 0;
}

I didn’t create the class .nuvem. What do you suggest?

css
  • 1

    Dude, specify more what your problem is... I don’t even understand what you’re asking exactly.

  • Take a look at the image, how to superimpose a div on the other.

  • Cloud is a single div ? IE tags, and details are in the same div without any other to separate ?

  • 1

    you really don’t quite understand what the problem is at first, but from what I understand, it’s from the text: DADOS DE ACERVO is already part of the second div of the tag cloud and which is supposed to be at a distance from each other div previous. If so, I think a .widget{display:block;} and if necessary width:100%; does the trick. Then it’s add a margin-top to add to it a spacing of div previous.

  • Apparently there’s already been an answer, but it’s best to always separate areas with different containers, so you can avoid forced corrections.

  • If you want to post a reply @Edilson would be interesting also your idea.

  • @Andrébaill it turns out I wasn’t seeing the dialling code, because I don’t know, but the solution would be to put a property display:block; in class .widgtet, as mentioned in the comment above. Because they are 2 different containers with different groups, it would be more logical and less painful.

Show 2 more comments

1 answer

2


Try something like that:

.nuvem {
    display:inline-block;
    width:100%;
    margin-bottom:20px;
}

  • Perfect solution, solved the problem! Thank you.

  • Wouldn’t it be better to apply the "inline-block" in . widget on instead of in . cloud? So all classes would already directly receive the inline attribute and not only solve this problem but avoid future.

  • Since I didn’t have a lot of css information, I preferred to have opinions only on what would be more interesting. There may be others widget on the page that might interfere. Cloud already seemed to me to be a secondary class, with less reuse.

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.