Menu icon Foundation
Layout help

Positioning

Hello,

I am using foundation 5, and I want to have 3 divs as posted in the image. The first two I'd like to be the hight of the browser window, and the 3rd one can be a normal div.. Any ideas on how to proceed ?

Thanks

gridhtmllayout

Positioning

Hello,

I am using foundation 5, and I want to have 3 divs as posted in the image. The first two I'd like to be the hight of the browser window, and the 3rd one can be a normal div.. Any ideas on how to proceed ?

Thanks

This post has been closed. No new replies can be added.

Mihai Stroe over 5 years ago

If you want full browser height sections you should take a look at js/jQuery.

Andrei P over 5 years ago

Multumesc.

I've managed to get the divs working together like so:

<div class="row">
   <div class="small-1 columns" style="background: blue">
     1
   </div>
   <div class="small-2 columns" style="background: green">
     2
   </div>
   <div class="small-9 columns" style="background: red">
     3
   </div>
</div>

My only problem is they are not full width even with .row { width: 100%; } - Any idea on how to make them full width of the browser?

Mihai Stroe over 5 years ago

Take a look at the settings partial and under Grid you'll see the following line

 $row-width: rem-calc(1000);

That means that your row will be a maximum of 1000px wide, and because of the rem-calc function it'll convert 1000px to rems when compiling to css. I'm guessing if you change rem-calc(1000) to 100% you should have a full width row.

Andrei P over 5 years ago

Which file is that? PS: I don't use SCSS.

Mihai Stroe over 5 years ago

It's _settings.scss in the scss folder. In Sass any sass/scss file with an underscore in front is called a partial.

Mihai Stroe over 5 years ago

Actually check this post out as well, I think it's exactly what you're looking for:

http://foundation.zurb.com/forum/posts/132-full-width-row

Rafi Benkual over 5 years ago

If you want full width of screen, just drop the row class. Your columns will then fill the screen size.