Solved

having trouble with my heights on my sections on my page

Posted on 2014-12-08
14
78 Views
Last Modified: 2014-12-31
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
Comment
Question by:Big Monty
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 9
  • 5
14 Comments
 
LVL 58

Accepted Solution

by:
Gary earned 500 total points
ID: 40489245
Sticky footer is the easiest way

http://www.cssstickyfooter.com/

Just needs a few changes to your css
0
 
LVL 33

Author Comment

by:Big Monty
ID: 40489462
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
 
LVL 58

Expert Comment

by:Gary
ID: 40489531
Implement the sticky footer first then we'll see about the other thing.

(neglected after 12 hours with no response)
0
Get 15 Days FREE Full-Featured Trial

Benefit from a mission critical IT monitoring with Monitis Premium or get it FREE for your entry level monitoring needs.
-Over 200,000 users
-More than 300,000 websites monitored
-Used in 197 countries
-Recommended by 98% of users

 
LVL 33

Author Comment

by:Big Monty
ID: 40490132
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
 
LVL 58

Expert Comment

by:Gary
ID: 40490139
That seems to be based on the same css as the link.

Page is too messed up to do anything with it.
0
 
LVL 33

Author Comment

by:Big Monty
ID: 40490142
what do you mean "too messed up"? I was just testing something but put it back to where the footer is correct
0
 
LVL 58

Expert Comment

by:Gary
ID: 40490166
<script>
$(function(){
    $(".content-section-a").css({"height":$("body").height()-$(".intro-header").height() + "px"})
})
</script>

Open in new window

0
 
LVL 33

Author Comment

by:Big Monty
ID: 40491547
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
 
LVL 58

Expert Comment

by:Gary
ID: 40492205
<script>
$(function(){
    $(".content-section-a").css({"height":$("body").height()-$(".intro-header").height()-$(".footer").height() + "px"})
})
</script>

Open in new window

0
 
LVL 33

Author Comment

by:Big Monty
ID: 40493988
didn't get a chance to try this yet, hope to do so this afternoon or tonight
0
 
LVL 33

Author Comment

by:Big Monty
ID: 40498002
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
 
LVL 33

Author Comment

by:Big Monty
ID: 40498093
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
 
LVL 33

Author Comment

by:Big Monty
ID: 40499382
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
 
LVL 33

Author Comment

by:Big Monty
ID: 40525687
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

Featured Post

Optimize your web performance

What's in the eBook?
- Full list of reasons for poor performance
- Ultimate measures to speed things up
- Primary web monitoring types
- KPIs you should be monitoring in order to increase your ROI

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
This article was originally published on Monitis Blog, you can check it here . Today it’s fairly well known that high-performing websites and applications bring in more visitors, higher SEO, and ultimately more sales. By the same token, downtime…
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

631 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question