CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
user3921890
user3921890

Reputation: 191

How to overlap panel from one row to another row?

I have these panels inside different rows. To easily show my problem, and my desired output, here's a visual...

enter image description here

At the left side is the problem I encounter, and at the right side is the desired output. I was wondering how it's possible to make the right panel overlap to the other row.

My html's structured something like this, which is all inside a .container-fluid(if that contributes to the problem)...

<div class="row">
    <div class="col-md-6">
        <div class="panel">  <!-- top-left panel --> </div>
    </div>
    <div class="col-md-6">
        <div class="panel"> <!-- right panel --> </div>
    </div>
</div>

<div class="row">
    <div class="col-md-6">
        <div class="panel">  <!-- bottom-left panel -->  </div>
    </div>
</div>

I'm using bootstrap.

p.s. sorry for the html "sample", not familiar yet on how to use the html snippet

Upvotes: 1

Views: 462

Answers (5)

Carol Skelly
Carol Skelly

Reputation: 362530

If you can use separate columns (as shown in Gaurav's answer) that will work. If the height of the panels is unknown (variable) here isn't really a simple way. Another option is to put all your cols in a single row and use CSS3 column-width..

  .row {
     -moz-column-width: 50em;
     -webkit-column-width: 50em;
     -moz-column-gap: .1em;
     -webkit-column-gap: .1em; 
   }

  .col-md-6 {
     float:none;
     display: inline-block;
     margin: .1em;
     width: 100%;
   }

http://www.bootply.com/6ynLAwenzq

Upvotes: 0

Gaurav Aggarwal
Gaurav Aggarwal

Reputation: 10187

You can code left div's in one wrapper and right one in another.

HTML

<div class="row">
    <div class="col-md-6">
        <div class="panel">
            //top left panel
        </div>
        <div class="panel">
            // bottom left panel
        </div>
    </div>
    <div class="col-md-6">
        <div class="panel">
            // right panel
        </div>
    </div>
</div>

According to your visual above html will be fine but heights are not managed in this.

If you wish to have same height of right box according to left main box then use follwing code

HTML

<div class="row main">
    <div class="col-md-6 inner">
        <div class="panel">
            //top left panel
        </div>
        <div class="panel">
            // bottom left panel
        </div>
    </div>
    <div class="col-md-6 inner">
        <div class="panel">
            // right panel
        </div>
    </div>
</div>

CSS

.main{
  display:flex;
}

Upvotes: 1

Mohod Sandhya
Mohod Sandhya

Reputation: 450

Please try this:
<div class="row">
    <div class="col-lg-8 col-md-8 col-xs-12 col-s-12">
        <div class="col-lg-12 col-md-12">
    //Your Content Here
        </div>
        <div class="col-lg-12 col-md-12 col-xs-12 col-sm-12">
           //Your Content Here
        </div>
    </div>
    <div class="col-lg-4 col-md-4 col-xs-12 col-sm-12">
        <div class="col-lg-12 col-md-12 col-xs-12 col-sm-12">
            //Your Content Here
        </div>
    </div>
</div>

Upvotes: 0

Oron Bendavid
Oron Bendavid

Reputation: 1533

Use flex

.flex{
  display:flex;
}

.flex-1{
  flex:1;
}

.height-50{
  height:50px;
}

.margin-r-15{
  margin-right:15px;
}

.border-1px{
  border:1px solid black;
}
<div class="flex">
  <div class="flex-1 margin-r-15">
    <div class="height-50 border-1px" >
    </div>
    <div class="height-50 border-1px">
    </div>
  </div>
  <div class="flex-1 border-1px">
  </div>
</div>

Upvotes: 2

satya
satya

Reputation: 1185

Please try like this:

   <div class="row">
    <div class="col-md-8">
    <div class="row">
    <div class="col-md-12"></div>
    </div>
    <div class="row">
    <div class="col-md-12"></div>
    </div>
    </div>
    <div class="col-md-3">
    <div class="row">
    <div class="col-md-12"></div>
    </div>
    </div>
    </div>

Upvotes: 0

Related Questions