Overlap alignment of Divs!

Asked

Viewed 67 times

2

I have a widget that I will insert images,e dentro desse widget tenho uma div e outra div detro dela onde serão inseridas as imagens, e mais duas Divs onde ficou um titulo e uma imformação abaixo desse titulo. The problem is that the images are getting a big margin at the top, how can I fix this? or can give me some other way to make 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

  • Hard to understand saw. It has how to make a print there and paste in your question?

1 answer

0


Young your problem is with the structure of your HTML, the images and the Infos should be within the <div class="noticia_item"> but you closed it before you put the elements inside.

To better understand see the example below. I did not touch anything CSS just closed the tag div <div class="noticia_item"> in the right place. I left the comment in the code <!-- abre aqui -->

.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>

Browser other questions tagged html css

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