CODEWITHSUNDEEP
csszurb-foundation-6
MeltingDog
MeltingDog

Reputation: 15404

Is there a way to make a Foundation column exceed the boundaries of it's row?

I am using Zurb Foundation 6. I have a row with 2 columns, as such:

<div class="row">
   <div class="columns medium-4 left-col">
     Left column.
   </div>
   <div class="columns medium-8 right-col">
     Right column. Needs to reach far right hand side of screen.
   </div>
</div>

Naturally, Foundation .rows have a max-width of 75rem, meaning there will be margins either side if the screen is larger than 75rem. That's fine, I want to leave that. However, I want the right side column to extend all the way to the right, passed that 75rem width.

In other words, I want to try and have the left column behave like its within a max-width: 75rem; wrapping row, but the right column to behave like it's in a max-width: 100%; wrapping row.

See here for more info: https://jsfiddle.net/u4x5owc0/11/

Is there a way I can achieve this (with Foundation)?

I've tried making the right column position: absolute; width: 100%; but that just covers the left side as well.

Would anyone know if this is possible and if theres a way to do this?

Upvotes: 1

Views: 189

Answers (2)

acmsohail
acmsohail

Reputation: 1023

You should use .right-col{position: absolute; right: 0;}. But it won't support for small devices. You should use @media query for responsive. Please check DEMO it's working fine with responsive. 

.left-col, .right-col {
  height: 40vh;
  color: white;
  margin-bottom: 20px;
}

.left-col {
  background: green;
}

.right-col {
  background: red;
}
@media(min-width:640px){
  .right-col{
    position: absolute;
    right: 0;
  }
} 
<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/css/foundation.min.css" rel="stylesheet"/>
<div class="row">
<div class="columns medium-4 left-col">
</div>
<div class="columns medium-8 right-col">
Needs to reach far right hand side of screen. ==>
</div>
</div>

<div class="row expanded">
<div class="columns medium-4 left-col">
  Needs to remain the same width as above. 
</div>
<div class="columns medium-8 right-col">
</div>
</div>

Upvotes: 1

davidatthepark
davidatthepark

Reputation: 1365

I don't think foundation has this feature but using position: absolute; right: 0; on the right column worked for me.

Updated fiddle

Upvotes: 1

Related Questions