Div alignment side by side

Question

Div alignment side by side

Navigation

#1 by (3 votes)
#2 by (2 votes)
#3 by (1 votes)

2

I want the two divs (green and red) aligned side-by-side as they are, but green should be fixed right-aligned while red aligned left, so I set margin-left:0vw; to green, and did not solve, what procedure would you do to leave the red on the left, and the green on the right?

div.container {
        height: 100%;
        background: -webkit-linear-gradient(top, #088fad 20%, #00d5ff 100%);
    }

    div.titulo {
        font-size: 5vw;
        background-color: blue;
        text-align: center;
        padding: 3vw;
        position: relative;
    }

    div.op1 {
        width: 38%;
        display: inline-block;
        background-color: red;
        font-size: 3vw;
        text-align: center;
        padding: 5vw 0vw 5vw 0vw;
        min-width:40vw;
    }

    div.op2 {
        width: 38%;
        background-color: green;
        display: inline-block;
        margin-right: 0vw;
        font-size: 3vw;
        text-align: center;
        padding: 5vw 0vw 5vw 0vw;
        min-width:40vw;
    }

<div class="container">
    <div class="col-md-12"></div>
    <div class="titulo">O que você está procurando?</div>
    <div class="op1">Opção 1</div>
    <div class="op2">Oção 2</div>
</div>

html css

asked by anonymous 05.01.2017 / 20:46

3 answers

2

A simple and quick alternative is to use the space-between property of flex-box, example ...

.container{
  display: flex;
  flex-direction: column;
}
.titulo {
   font-size: 5vw;
        background-color: blue;
        text-align: center;
        padding: 3vw;
        position: relative;
}
.ctnFlex{
  display: flex;
  justify-content: space-between;
}
 div.op1 {
        width: 38%;
        display: inline-block;
        background-color: red;
        font-size: 3vw;
        text-align: center;
        padding: 5vw 0vw 5vw 0vw;
        min-width:40vw;
    }

    div.op2 {
        width: 38%;
        background-color: green;
        display: inline-block;
        margin-right: 0vw;
        font-size: 3vw;
        text-align: center;
        padding: 5vw 0vw 5vw 0vw;
        min-width:40vw;
    }

<div class="container">
    
    <div class="titulo">O que você está procurando?</div>
    <div class="ctnFlex">
       <div class="op1">Opção 1</div>
       <div class="op2">Oção 2</div>
      
    </div>
   
</div>

05.01.2017 / 21:17

1

MADE WITH FLOAT

div.container {
        height: 100%;
        background: -webkit-linear-gradient(top, #088fad 20%, #00d5ff 100%);
    }

    div.titulo {
        font-size: 5vw;
        background-color: blue;
        text-align: center;
        padding: 3vw;
        position: relative;
    }

    div.op1 {
        width: 38%;
        float:left;
        background-color: red;
        font-size: 3vw;
        text-align: center;
        padding: 5vw 0vw 5vw 0vw;
        min-width:40vw;
    }

    div.op2 {
        width: 38%;
        background-color: green;
        float:right;
        margin-right: 0vw;
        font-size: 3vw;
        text-align: center;
        padding: 5vw 0vw 5vw 0vw;
        min-width:40vw;
        float:right;
    }
    .clean{clear:both;}

<div class="container">
    <div class="col-md-12"></div>
    <div class="titulo">O que você está procurando?</div>
    <div class="op1">Opção 1</div>
    <div class="op2">Oção 2</div>
    <div class="clean"></div>
</div

05.01.2017 / 21:26

Doubt how to change the jquery mask type Regex verify IP

score 3 · Accepted Answer

Would that be it? In this case, just add the div2 property to float:right; , so that the div "floats" to the right. I hope I have helped!

div.container {
        height: 100%;
        background: -webkit-linear-gradient(top, #088fad 20%, #00d5ff 100%);
    }

    div.titulo {
        font-size: 5vw;
        background-color: blue;
        text-align: center;
        padding: 3vw;
        position: relative;
    }

    div.op1 {
        width: 38%;
        display: inline-block;
        background-color: red;
        font-size: 3vw;
        text-align: center;
        padding: 5vw 0vw 5vw 0vw;
        min-width:40vw;
    }

    div.op2 {
        width: 38%;
        background-color: green;
        display: inline-block;
        margin-right: 0vw;
        font-size: 3vw;
        text-align: center;
        padding: 5vw 0vw 5vw 0vw;
        min-width:40vw;
        float:right;
    }

<div class="container">
    <div class="col-md-12"></div>
    <div class="titulo">O que você está procurando?</div>
    <div class="op1">Opção 1</div>
    <div class="op2">Oção 2</div>
</div>