/    Sign up×
Community /Pin to ProfileBookmark

[RESOLVED] Same-page links break equal column height

Copy linkTweet thisAlerts:
Feb 10.2015

Finally solved the multiple column equal height fixed fluid layout problem. Pages look and perform as desired, with one exception: on a page with internal links to other areas of the same page, the tops of columns are cut off, equal height no longer exists, you cannot scroll back to the top and clicking the browser back button has no affect.

Through the process of elimination, I have determined the culprit to be using

[code]padding-bottom: 99999px; margin-bottom: -99999px;[/code]

to get the equal column height. Without it, the page works as designed, except for equal column height; with it, the page responds as described above.

Page reference is [url]http://www.tax-savings-depot.com/credits/education-credits.php[/url]

Click on the first or second content link to see what is described above. I have tried using regular CSS and Pseudo CSS, but results are the same.

CSS is located at [url]http://www.tax-savings-depot.com/styles/main.css[/url]. Look for the section labeled “New Wrapper” to view the current layout CSS.

to post a comment
CSS

5 Comments(s) ↴

Copy linkTweet thisAlerts:
@jedaisoulFeb 10.2015 — Fluid? You have a huge blank area on the left! ?
Copy linkTweet thisAlerts:
@jwgrafflinauthorFeb 11.2015 — Moved the url to the following location to allow further testing while updating the rest of the site http://www.tax-savings-depot.com/credits/test.php

You must have viewed the page during the moving process. Please try again at the new url. The old url still works, but now uses a different layout css which does not have a fixed left column. My ultimate goal is to have a fixed left/fluid right with equal column height and same page links that do not break it.
Copy linkTweet thisAlerts:
@jwgrafflinauthorFeb 12.2015 — If this was a page designed for smartphone users, great tool. But, it's not, and smartphone accessibility is not the issue here.

The problem that is at issue has been solved. For your education: http://www.tax-savings-depot.com/credits/test.php

For those actually interested in being productive and learning how to implement the solution: Place the following code in either your head or external script. Nothing else needs to be changed, except maybe adding a link at the bottom of those linked areas to return to the top of the page or previous location on the page.

<script>
$(function() {
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^//,'') == this.pathname.replace(/^//,'') && location.hostname == this.hostname) {

<i> </i> var target = $(this.hash);
<i> </i> target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
<i> </i> if (target.length) {
<i> </i> $('html,body').animate({
<i> </i> scrollTop: target.offset().top
<i> </i> }, 1000);
<i> </i> return false;
<i> </i> }
<i> </i> }
<i> </i> });
<i> </i>});
&lt;/script&gt;

The left column is fixed, the right column is fluid, both columns are of equal height and the same-page links don't break it.

I'll tackle the smartphone issue later.
Copy linkTweet thisAlerts:
@Kevin2Feb 12.2015 — My apologies for coming off as a smarta$$, that was not my intent. But when "fluid layout" is mentioned, as you did in your original post, the assumption (at least for me) is that you want a mobile-friendly design. You apparently do not. Sorry for assuming and taking the thread slightly off-topic.
×

Success!

Help @jwgrafflin spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...