Place two div side by side

Question

Place two div side by side

Navigation

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

3

How can I place these two div side by side? The one on the left occupies 15% and the one on the right 84%

.container {
    width: 99.5%;
    height: 100px;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<div class="container-fluid" id="main-content">
        <div class="container">
            <div class="row">
                <div class="col-2">col-2</div>
                <div class="col-10">col-10</div>
            </div>
        </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous">

html css bootstrap

asked by Eduardo 17.04.2018 в 09:49

source

2 answers

Does not show percentage calculations Exercise list of numbers ending in 2 with an unknown fault

score 3 · Answer 1

You can also do it without Bootstrap, by applying the display: flex to the container of the two div, which in this case is the row class and we apply 100% of the width.

   .row {
     display: flex;
     width: 100%;
  }

We also add classes to both div in the HTML and we tell you the percentage you want for each one.

    .col1 {
       background: grey;
       width: 15%;
}
    .col2 {
       border: white;
       background: grey;
       width: 85%;
}

Here I leave the modified complete code. If you run it inside the container the divs behave as you want.

I hope it helps you.

.col1 {
   background: grey;
   width: 15%;
}
.col2 {
   border: white;
   background: grey;
   width: 85%;
}
.row {
  display: flex;
  width: 100%;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<div class="container-fluid" id="main-content">
        <div class="container">
            <div class="row">
                <div class="col1">col-2</div>
                <div class="col2">col-10</div>
            </div>
        </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous">

score 1 · Answer 2

Botstrap has 2 types of containers:

container : that occupies 90% of the total screen.

container-fluid : that occupies 100% of the screen

In bootstrap, everything that goes inside the container is advisable to use row .

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container-fluid">
  <div class="row text-white text-center">
    <div class="col-2 bg-dark border">DIV 1</div>
    <div class="col-10 bg-dark border">DIV 2</div>
  </div>
</div>