Positioning an image using the Zurb Foundation grid

1/17/2014

1/10/2014

http://jsfiddle.net/sGrwQ/1/

<body>
    <div class="row">
        <div id="colLeftText" class="small-6 columns">
            <h1>Lorem Ipsum</h1>
            <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.</p>
        </div>
        <div id="colRightText" class="small-6 columns img-test">
            <div id="colRightImg">
             <img src="http://placehold.it/200x200" alt="" />
            </div>    
        </div>
    </div>
</body>

//var h = $('div.row').height();
var h2 = $('div#colLeftText').height();
//alert(h + ' '+h2)
$('#colRightText').height(h2);

body {
    background-color:#c5f2f9;
}

.columns { 
    border: 1px solid #999;  
}

#colRightText{
    
    
}
#colRightImg{
    bottom: 0;
    position:absolute;
    
}

Remember when you run live to place the jquery in a ready function

$(function() {
  // Handler for .ready() called.
});

1/10/2014

ASKER

Thanks very much for the solution Scott. I appreciate the quick reply.

However, there are just a couple of issues. Firstly, and I apologize if I didn't mention this in my question, but if possible I'd like to avoid a JavaScript solution. If a user doesn't have JavaScript enabled, do you have any suggestions for a fallback approach?

Also, if you resize your browser, the height of the image column does not resize to match the new height of the text column. My site is responsive so I need the solution to work in a scenario where lets say a user views my site on a iPad and switches from portrait to landscape.

Lastly, although in this example I only show one instance of a column of text and a column with an image, on the site I am working on there are a handful of instances of this on the same page with varying column heights. I am actually building a template so the approach I take needs to be something I can universally adopt to any text/img column scenario.

Anyway, I do appreciate your help. If you have any thoughts on how to tackle some of the points I mentioned, please let me know. If not, I will hold off to see if anyone else has an alternate solution.

Cheers.

1/10/2014

I used the full screen mode of jsfiddle http://jsfiddle.net/sGrwQ/1/embedded/result/ and it seemed to work fine when I tried out narrowing the browser.

> if possible I'd like to avoid a JavaScript solution. If a user doesn't have JavaScript enabled, do you have any suggestions for a fallback approach?
Both Zurb and Bootstrap make heavy use of jquery. If somebody does not have javascript turned on, then many of the features you are using will not work. The amount of people that do not have javascript turned on is very tiny. (The amount of people that may have java turned off is another story). Just about every modern site today makes heavy use of javascript so I think you are good.

The only way I can think of to get out of using javascript for this solution is to fix the hight of all columns. However, because you are using a responsive layout, that would be difficult since the width changes, so will the hight in many cases.

Javascript runs after the page is rendered so it is the only way I know of to get the height when you have not specified it in css.

If you want to specify the hight in your css of both the outer left and right columns, then you don't need the jquery portion.

>Also, if you resize your browser, the height of the image column does not resize to match the new height of the text column.
See the updated http://jsfiddle.net/9aHCB/1/embedded/result/ with jquery below

//var h2 = $('div.row').height();
var h2 = $('div#colLeftText').height();
//alert(h + ' '+h2)
$('#colRightText').height(h2);
$( window ).resize(function() {
    h2=$("#colLeftText").height();
    
   $( '#colRightText').css( 'height', h2+'px' );
});

> I am actually building a template so the approach I take needs to be something I can universally adopt to any text/img column scenario

You will need to plan out your ID's and Classes carefully. You can only have one ID per page but you can have multiple classes on the same page.

The code I used incorporated an ID. You can change out for a class if you like.

To be honest, this seems like an odd request. The natural flow of the browser is from top to bottom, left to right. Are you sure you don't really need more of a floating image that always stays at the same point in the browser?

1/10/2014

ASKER

Thanks for getting back to me Scott.

I hear what you're saying for the most part. However, while Foundation is built with a bunch of added JavaScript functionalities, it is also setup to have a number of fallbacks so that you're site doesn't blow up when JavaScript is disabled (I confirmed this by disabling JS on my site using Chrome Dev Tools).

I also agree that there is probably a small percentage of people that will have JS turned off (and as a result, I will probably end up taking the JS route). But I was really hoping I could figure it out without having to resort to taking that approach. I always prefer to avoid adding any major styling changes using JS without a fallback.

And just to clarify, while I'm not an advanced developer, I'm fairly intermediate at front-end dev but I guess more of a specialization in design. The reason I need the image to stick to the bottom is based on the design I've been handed. For example, the two column scenarios that I'm working with involve one column with text and one column with an image of a person where they are cut-off at the bottom. So I want the bottom of that image to line-up to the column so it doesn't look like I have a bunch of cut-off people floating around. Normally, I would just add the image to the background and position it but as I want the image to resize in relation to the content, I figured the easiest approach would be to put them in the column next to the text and let the grid work its magic.

In case that didn't really make much sense, here is an example of what I mean...

Anyway, I'll keep playing around. If you have any other ideas or alternate approaches, I'm definitely open to them. Thanks again for your help and input. Greatly appreciated.

1/10/2014

That picture really helps because I think the tactic you want is much different than what I expected.

I am short of time right now, but I think this is what you want http://www.cssstickyfooter.com/

I did search for stickyfooter zurb and found http://foundation.zurb.com/forum/posts/629-sticky-footer. I have been using bootstrap a lot more and there is a sticky footer and header for that built in.

If the entire black area and image need to stay at the bottom I think that will could be easier to work with.

1/11/2014

ASKER

Sorry Scott but I think my example may not have conveyed what I intended it to. The image was meant to just be a screen shot of a particular section on my page design. The black area is actually a section similar to the white section with image/text—I just cut it off for the sake of the example. But if it helps, I whipped this together super quickly to hopefully clear things up...

So I think you're initial understanding of what I'm looking to achieve is still accurate. Sorry for the confusion.

ASKER CERTIFIED SOLUTION

1/11/2014

THIS SOLUTION IS ONLY AVAILABLE TO MEMBERS.

View this solution by signing up for a free trial.

Members can start a 7-Day free trial and enjoy unlimited access to the platform.

See Pricing Options

Start Free Trial

1/13/2014

ASKER

Sorry for the delay Scott. I was thinking to myself "why didn't I think of that". But unfortunately, I remembered why I didn't take that approach. In my JSFiddle example, I set the columns to "small" so that they maintain their layout. However, on my site, they are actually set to "medium". So for tablets and smaller, the two columns would collapse into single columns—meaning the images would move to underneath the text. You can check it out here: http://jsfiddle.net/Ctk7p/.

So there are two issues with your suggestion. First, the image is no longer responsive in this case. I guess I could use media queries to swap out different sized background images depending on the size of the browser. But as this is a template, maintenance on something like that might be quite the hassle.

The other issue is that when the columns collapse, the image will now appear behind the text rather than underneath it. I could set padding to the bottom of the div avoid overlap of the text and image but each section on my page will require different paddings based on the size of the image—which again, can also be a bit of a hassle.

Anyway, the suggestions you've brought up are all potential solutions. Using the Foundation framework though I was hoping that there was a very simple and universal approach to tackling this. I'm going to keep at it a bit longer but will probably have to settle for one sooner than later. Thanks again for all your efforts Scott!

1/13/2014

I think I have given you a good base to go on. When you are working with a responsive layout, you have to plan out your page for each viewport.

>So for tablets and smaller, the two columns would collapse into single columns—meaning the images would move to underneath the tex

You will need to account for that. When the viewport goes to a smaller width and the columns stack, you will simply want the image to go full width of the column.

If you need, you can use http://foundation.zurb.com/docs/components/visibility.html

Try and work with the foundation library and not work around it.

Good luck on your project!