CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Mathias Rønnow Nørtoft
Mathias Rønnow Nørtoft

Reputation: 803

Keep divs from overflowing

How do I keeps these two from overflowing? I have tried almost everything so i don't know where to go from here. divs are marked with green and orange. enter image description here

enter image description here

#stemplingerclass {
    clear: both;
    max-width: 100%;

}

#datoid 
{

   clear: both;
   max-width: 100%;
}
<div class="col-sm-10">
   <div class="col-md-3 col-sm-3 col-xs-10 text-center" style="background-color: green;" >
         <div id="datoid">


         </div>
      </div>

       <div class="col-md-7 col-sm-7 col-xs-10" style="background-color: orange;">
         <div id="stemplingerclass">

         </div>
       </div>
   </div>

Upvotes: 3

Views: 362

Answers (3)

alifallahi
alifallahi

Reputation: 330

#greenpart{
  display: inline-block;
width:49%;
    overflow: scroll;
    }

    #orangepart{
        display: inline-block;

width:49%;
    overflow: scroll;

    }
<div id="greenpart" class="col-md-3 col-sm-3 col-xs-10 text-center" style="background-color: green;" >
             <div id="datoid">

    test1
             </div>
          </div>

           <div id="orangepart"class="col-md-7 col-sm-7 col-xs-10" style="background-color: orange;">
             <div id="stemplingerclass">
    test2
             </div>
           </div>

Upvotes: 0

Vadim Ovchinnikov
Vadim Ovchinnikov

Reputation: 14012

Just add display: flex; to container of these two divs. If you want children not to stretch also add align-items: flex-start; to you container.

Upvotes: 1

Kritika
Kritika

Reputation: 1





    #datoid {
  width: 50%;
  height: 100px;
  float: left;
  background-color: inherit;
  overflow: scroll;
}

#stemplingerclass {
  width: 50%;
  height: 100px;
  float: right;
  background-color: inherit;
  overflow: scroll;
}


    <div class="col-sm-10">
       <div class="col-md-3 col-sm-3 col-xs-10 text-center" style="background-color: green;" >
             <div id="datoid">


             </div>
          </div>

           <div class="col-md-7 col-sm-7 col-xs-10" style="background-color: orange;">
             <div id="stemplingerclass">

             </div>
           </div>
       </div>

Upvotes: 0

Related Questions