place one div inside another!

Question

place one div inside another!

Navigation

#1 by (1 votes)

2

I have a div and need to put two divs inside it, the problem is that the div in which the other divs will be inserted, does not have enough height for this. How can I do this placement?

follow the codes below!

.leftside {
    width: 750px;
    float: left;
}

.rightside {
    width: 278px;
    min-height: 300px;
    float: right;
    margin-left: 12px;
}

.widget {
    border: 1px solid #ccc;
    background-color: #fff;
    margin-bottom: 10px;
    border-radius: 2px;
}

.widget_titulo {
    height: 30px;
    line-height: 30px;
    background-color: #ddd;
    border-bottom: 1px solid #ccc;
    padding-left: 5px;
    font-size: 14px;
}

.widget_conteudo {
    text-align: center;
    padding-top: 5px;
    padding-bottom: 5px;
}

.noticia_item {
    font-size: 14px;
    margin: 0px 10px;
    padding: 10px 0px;
    text-align: left;
    border-bottom: 1px solid #ccc;
}

.noticia_item a {
    text-decoration: none;
    color: #000;
}

.slideshow {
    height: 335px;
    overflow: hidden;
    margin-bottom: 20px;
}

.slideshow_area {
    width: 10000px;
    height: 335px;
    transition: all 1s;
}

.slide {
    height: 335px;
    float: left;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.slide img {
    height: 335px;
    width: 750px;
}

.slideinfo {
    position: relative;
    top: -70px;
    height: 70px;
    background-image: url('../images/slideshow_bg.png');
    background-size: auto 70px;
    z-index: 10000;
}

.slideinfo_titulo {
    font-size: 20px;
    color: #fff;
    padding-top: 20px;
    margin-left: 20px;
}

.slideinfo_subtitulo {
    font-size: 13px;
    margin-left: 20px;
    color: #fff;
}

.bolls {
    position: absolute;
    width: 200px;
    height: 15px;
    margin-left: 10px;
    padding-top: 10px;
}

.boll {
    width: 15px;
    height: 15px;
    float: left;
    margin-right: 5px;
    cursor: pointer;
    background-color: #d0d1cc;
    border-radius: 10px;
}

.noticiaarea1 {
    width: 430px;
    height: 420px;
    float: left;
    background-color: #ddd;
}

.noticiaarea2 {
    width: 315px;
    height: 420px;
    float: right;
    background-color: #ccc;
}

           <div class="widget">
            <div class="widget_titulo">NOTÍCIAS</div>
            <div class="widget_conteudo">
                <div class="noticiaarea1">

                </div>
                <div class="noticiaarea2">

                </div>
                <div class="clear:both"></div>
             </div>

html css

asked by anonymous 13.05.2018 / 23:29

1 answer

Reply (in e-mail) the PHP form response to a different email How to make a footer (footer) get fixed after the Parallax effect?

score 1 · Accepted Answer

I see an error in the html there in its clear should be a class <div class="clear"></div> or if you prefer to use inline even add style instead of class <div style="clear: both;"></div>

.leftside {
    width: 750px;
    float: left;
}

.rightside {
    width: 278px;
    min-height: 300px;
    float: right;
    margin-left: 12px;
}

.widget {
    border: 1px solid #ccc;
    background-color: #fff;
    margin-bottom: 10px;
    border-radius: 2px;
}

.widget_titulo {
    height: 30px;
    line-height: 30px;
    background-color: #ddd;
    border-bottom: 1px solid #ccc;
    padding-left: 5px;
    font-size: 14px;
}

.widget_conteudo {
    text-align: center;
    padding-top: 5px;
    padding-bottom: 5px;
}

.noticia_item {
    font-size: 14px;
    margin: 0px 10px;
    padding: 10px 0px;
    text-align: left;
    border-bottom: 1px solid #ccc;
}

.noticia_item a {
    text-decoration: none;
    color: #000;
}

.slideshow {
    height: 335px;
    overflow: hidden;
    margin-bottom: 20px;
}

.slideshow_area {
    width: 10000px;
    height: 335px;
    transition: all 1s;
}

.slide {
    height: 335px;
    float: left;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.slide img {
    height: 335px;
    width: 750px;
}

.slideinfo {
    position: relative;
    top: -70px;
    height: 70px;
    background-image: url('../images/slideshow_bg.png');
    background-size: auto 70px;
    z-index: 10000;
}

.slideinfo_titulo {
    font-size: 20px;
    color: #fff;
    padding-top: 20px;
    margin-left: 20px;
}

.slideinfo_subtitulo {
    font-size: 13px;
    margin-left: 20px;
    color: #fff;
}

.bolls {
    position: absolute;
    width: 200px;
    height: 15px;
    margin-left: 10px;
    padding-top: 10px;
}

.boll {
    width: 15px;
    height: 15px;
    float: left;
    margin-right: 5px;
    cursor: pointer;
    background-color: #d0d1cc;
    border-radius: 10px;
}

.noticiaarea1 {
    width: 430px;
    height: 420px;
    float: left;
    background-color: #ddd;
}

.noticiaarea2 {
    width: 315px;
    height: 420px;
    float: right;
    background-color: #ccc;
}
.clear {
    clear: both;
}

<div class="widget">
     <div class="widget_titulo">NOTÍCIAS</div>
     <div class="widget_conteudo">
         <div class="noticiaarea1">

         </div>
         <div class="noticiaarea2">

         </div>
         <div class="clear"></div>
     </div>
</div>