DIV side by side

Asked

Viewed 1,259 times

2

How do I place the div gallery on the right side of the div description?

HTML

<!-- language: lang-html -->
    <div class="row">
        <div class="col-md-10">
            <div class="projeto">
                    <h2>DIV TITULO</h2>
                <div class="descricao">
                    <p>DESCRIÇÃO</p>
                </div>
                <div class="box-galeria">
                    <p>GALERIA</p>
                </div>
            </div>
        </div>
    </div>

CSS 

.projeto{
    background-color: #F6F3F3;
    border-radius: 50px;
    padding: 1%;
    margin-right: 5%;
    margin-left: 5%;
    margin-top: 2%;
    border: 5px solid #E5E3E3;
    height: 30em;
}

.projeto h2{
    margin: 1%;
    font-size: 1.5em;
    text-align: center;
    text-transform:uppercase;
    font-family: sans-serif;
    margin-bottom: 5%;
    border: 1px solid yellow;
}

.projeto p{
    margin: 2%;
    font-size: 1.0em;
    margin-top: 2%;
    margin-bottom: 2%;
}

.projeto .descricao{
    border: 1px solid red;
    width: 50%;
    height: 70%;
}

.projeto .box-galeria{
    border: 1px solid red;
    width: 40%;
    height: 50%;
    position: relative;
}
IMAGEM DE COMO ESTA

css css3

1 answer

1


I made a small modification, adding a div and the style display:flex attributed to her.

.projeto{
    background-color: #F6F3F3;
    border-radius: 50px;
    padding: 1%;
    margin-right: 5%;
    margin-left: 5%;
    margin-top: 2%;
    border: 5px solid #E5E3E3;
    height: 30em;
}

.projeto-container{
    display: flex;
}
.projeto h2{
    margin: 1%;
    font-size: 1.5em;
    text-align: center;
    text-transform:uppercase;
    font-family: sans-serif;
    margin-bottom: 5%;
    border: 1px solid yellow;
}

.projeto p{
    margin: 2%;
    font-size: 1.0em;
    margin-top: 2%;
    margin-bottom: 2%;
}

.projeto .descricao{
    border: 1px solid red;
    width: 50%;
    height: 70%;
}

.projeto .box-galeria{
    border: 1px solid red;
    width: 40%;
    height: 50%;
    position: relative;
}
<div class="row">
        <div class="col-md-10">
            <div class="projeto">
                <h2>DIV TITULO</h2>
                <div class="projeto-container">
                    <div class="descricao">
                        <p>DESCRIÇÃO</p>
                    </div>
                    <div class="box-galeria">
                        <p>GALERIA</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

  • It worked out! Thanks.

Browser other questions tagged css css3

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