Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 3 of 3
  1. #1
    Junior Member
    Join Date
    Jun 2012
    Posts
    4
    Member #
    31944
    In attempting an alternate pre-publish site design I am looking to implement equal height divs. Wanted to do it with CSS only but it seems because I want to include a border going that route becomes a bit complicated if at all possible. I decided to give jQuery a try but now I'm running into text overflow problems. I'm thinking it may have to do with the fact I'm using tabs vs standard nav links for content change of one of the divs.

    http://streamlinemac.com/test29w/index.html << Original design
    http://streamlinemac.com/test29w4/index.html << Updated design. Left column overflow problem.

    I have noticed many noting the jQuery option for equal height columns runs into the problem of not resizing dynamically without refreshing the page. Due to this and the fact that my use of tabs means there is no page refresh nor can I manually refresh without full circling back to the "Home" tab has me stuck. In the meanwhile I've tried different overflow and height options for associated divs all to no avail, figured it's time to ask for help before I dirty up my HTML and CSS too badly.

    Any assistance would be appreciated in massaging jQuery or all together moving to something different. As you can see I'm not a web designer and simply doing this as a favor for a friend so please excuse my mark-up and coding foibles unless they are the cause of current woes.

  2.  

  3. #2
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,485
    Member #
    425
    Liked
    2783 times
    Have you tried the faux columns approach?

    In your case, you'd have to get trickier with it, though. You'd create a top background which would consist of your top borders, the middle background which would be your middle borders/columns, and then the bottom background which would be your bottom borders.

    In other words, it's doable, but you'll have to get a little bit funky with it. I used to have a working example of this, but I don't anymore.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  4. #3
    Junior Member
    Join Date
    Jun 2012
    Posts
    4
    Member #
    31944
    Appreciate for the reply TheGAME1264!

    Yeah, got excited when I first saw and considered faux columns but since this is a responsive design I could not think of a way to make it doable. It's really the need for those darn borders causing the problems.

    After fiddling I believe I've come up with a workable solution albeit not perfect but a decent compromise. Gave "container.main" the blue background while applying white and a min-height value to the "main_l" column. We won't have the double center borders with 3px gap but we would have pseudo dynamic height. http://streamlinemac.com/test29w6/index.html

    All the above is moot anyhow as they just informed me they like an earlier design. Best of all it's basically complete and simply awaiting their content. http://streamlinemac.com/test29f/index.html

    Thanks again!


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 01:47 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com