divs overlap alignment!

Question

divs overlap alignment!

Navigation

#1 by (0 votes)

2

I have a widget that will insert some images, and inside this widget I have a div and another div where it will be inserted the images, and two divs where they have a title and an underline below that title. The problem is that the images are getting a big margin at the top, how can I fix this? or can you give me some other way to do this implementation?

codes below:

.noticiaarea2 {
    width: 310px;
    height: 420px;
    float: right;
}

.clear {
    clear: both;
}

.noticia_item {
    text-align: left;
    height: 88px;
}

.noticia_img {
    width: 80px;
    height: 80px;
    border: 1px solid #ccc;
    padding: 3px;
    float: left;
}

.noticia_titulo {
    float: left;
    margin-left: 6px;
    font-size: 16px;
    width: 216px;
}

.noticia_info {
    float: left;
    margin-left: 6px;
    color: #999;
    width: 216px;
}

        <div class="widget">
            <div class="widget_titulo">NOTÍCIAS</div>
            <div class="widget_conteudo">
                <div class="noticiaarea1">
                </div>
                <div class="noticiaarea2">
                    <div class="noticia_item"></div>
                    <div class="noticia_img">
                        <img src="" border="0" width="80" height="80">
                    </div>
                    <div class="noticia_titulo">Algum titulo qualquer</div>
                    <div class="noticia_info">500 comentários</div>
                    <div class="noticia_item"></div>
                    <div class="noticia_img">
                        <img src="" border="0" width="80" height="80">
                    </div>
                    <div class="noticia_titulo">Algum titulo qualquer</div>
                    <div class="noticia_info">500 comentários</div>
                    <div class="noticia_item"></div>
                    <div class="noticia_img">
                        <img src="" border="0" width="80" height="80">
                    </div>
                    <div class="noticia_titulo">Algum titulo qualquer</div>
                    <div class="noticia_info">500 comentários</div>
                </div>
                <div style="clear: both;"></div>
            </div>
        </div>

html css

asked by anonymous 14.05.2018 / 22:06

1 answer

How do I configure routing in asterisk? Composite key in laravel migrate

score 0 · Accepted Answer

Young your problem is with the structure of your HTML, the images and the infos must be within <div class="noticia_item"> however you closed it before putting the elements in.

To understand better, see the example below. I did not move in CSS at all, I just closed the div <div class="noticia_item"> tag in the right place. I left the comment in code 

.noticiaarea2 {
    width: 310px;
    height: 420px;
    float: right;
}

.clear {
    clear: both;
}

.noticia_item {
    text-align: left;
    height: 88px;
}

.noticia_img {
    width: 80px;
    height: 80px;
    border: 1px solid #ccc;
    padding: 3px;
    float: left;
}

.noticia_titulo {
    float: left;
    margin-left: 6px;
    font-size: 16px;
    width: 216px;
}

.noticia_info {
    float: left;
    margin-left: 6px;
    color: #999;
    width: 216px;
}

<div class="widget">
    <div class="widget_titulo">NOTÍCIAS</div>
    <div class="widget_conteudo">
        <div class="noticiaarea1">
        </div>
        <div class="noticiaarea2">
            <!-- abre aqui -->
            <div class="noticia_item"> 
                <div class="noticia_img">
                    <img src="http://placecage.com/80/80"border="0" width="80" height="80">
                </div>
                <div class="noticia_titulo">Algum titulo qualquer</div>
                <div class="noticia_info">500 comentários</div>
            </div>
            <!-- fecha aqui -->
            <div class="noticia_item">
                <div class="noticia_img">
                    <img src="http://placecage.com/80/80"border="0" width="80" height="80">
                </div>
                <div class="noticia_titulo">Algum titulo qualquer</div>
                <div class="noticia_info">500 comentários</div>
            </div>
            <div class="noticia_item">
                <div class="noticia_img">
                    <img src="http://placecage.com/80/80"border="0" width="80" height="80">
                </div>
                <div class="noticia_titulo">Algum titulo qualquer</div>
                <div class="noticia_info">500 comentários</div>
            </div>
            
        </div>
        <div style="clear: both;"></div>
    </div>
</div>