Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 86
  • Last Modified:

having trouble with my heights on my sections on my page

i have a page here I'm trying to finalize the design on. from a design perspective, it has 4 horizontal sections: nav, banner (where the photo and white box reside), signup form (where the signup form resides), and footer.

my problem is that I want my footer to always be on the very bottom of the page, and the signup form section to automatically fill in the space between the footer and the banner section.

The second thing I'm trying to accomplish is to keep the white box in the banner to always fill up about 90% on the image with a padding of 5% on the top and bottom. Depending on the resolution, I can get it to work, but not all of the time.

all help is greatly appreciated :)
0
Big Monty
Asked:
Big Monty
  • 9
  • 5
1 Solution
 
GaryCommented:
Sticky footer is the easiest way

http://www.cssstickyfooter.com/

Just needs a few changes to your css
0
 
Big MontySenior Web Developer / CEO of ExchangeTree.org Author Commented:
not sure why this says Neglected at the top as I just posted it last night! :)

If I used Sticky Footer, how would I then get the signup section automatically size all the way down?
0
 
GaryCommented:
Implement the sticky footer first then we'll see about the other thing.

(neglected after 12 hours with no response)
0
Get 10% Off Your First Squarespace Website

Ready to showcase your work, publish content or promote your business online? With Squarespace’s award-winning templates and 24/7 customer service, getting started is simple. Head to Squarespace.com and use offer code ‘EXPERTS’ to get 10% off your first purchase.

 
Big MontySenior Web Developer / CEO of ExchangeTree.org Author Commented:
I ended up going with the code below for the footer, since I'm using Bootstrap 3 (forgot to mention that originally) that I found here

footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 60px;
  background-color: #3D4C38;
}

Open in new window


so far it seems to be working, but I'm going to continue testing it.

how should I deal with the white box space issue?
0
 
GaryCommented:
That seems to be based on the same css as the link.

Page is too messed up to do anything with it.
0
 
Big MontySenior Web Developer / CEO of ExchangeTree.org Author Commented:
what do you mean "too messed up"? I was just testing something but put it back to where the footer is correct
0
 
GaryCommented:
<script>
$(function(){
    $(".content-section-a").css({"height":$("body").height()-$(".intro-header").height() + "px"})
})
</script>

Open in new window

0
 
Big MontySenior Web Developer / CEO of ExchangeTree.org Author Commented:
that script fills in the gap but pushes the footer off the page on a 19" monitor, which I don't want. I tried adjusting the height for the signup section but that doesnt work.

any ideas on how to adjust the white box to only ever take up ~85%-90% of the image behind it? are media queries the best way to go?

thx for sticking with me on this, much appreciated!
0
 
GaryCommented:
<script>
$(function(){
    $(".content-section-a").css({"height":$("body").height()-$(".intro-header").height()-$(".footer").height() + "px"})
})
</script>

Open in new window

0
 
Big MontySenior Web Developer / CEO of ExchangeTree.org Author Commented:
didn't get a chance to try this yet, hope to do so this afternoon or tonight
0
 
Big MontySenior Web Developer / CEO of ExchangeTree.org Author Commented:
just tried your latest javascript and it pushed everything down, so now there's a scroll bar which I want to avoid. I' going to try to implement the sticky footer solution you posted earlier and see if that works any better

do you have any ideas on how to vertically center the white box upon any resizing of the browser?

one other thing I forgot to ask, is there an easy way align the white box, the signup form, and the button, all left aligned?
0
 
Big MontySenior Web Developer / CEO of ExchangeTree.org Author Commented:
one other thing I forgot to ask, is there an easy way align the white box, the signup form, and the button, all left aligned?

forget about this, I was able to figure it out
0
 
Big MontySenior Web Developer / CEO of ExchangeTree.org Author Commented:
so a little update, putting in the sticky footer from above seems to be the better option, although its not 100% working correctly. on my regular monitor, there's some white space between the footer and sign up section (see attached file). if I use your script, it pushes the footer way way down, but there is no white space.
white-space-example.png
0
 
Big MontySenior Web Developer / CEO of ExchangeTree.org Author Commented:
figures I figure it out AFTER I request attention :)

the solution was to add

background-color: #d0bb9b

to my #wrap css

will award points to Gary for pointing me in the direction of the sticky footer
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

  • 9
  • 5
Tackle projects and never again get stuck behind a technical roadblock.
Join Now