Welcome to WebDesignForums.net!
You're currently viewing WDF as a guest. By registering for a free account, you'll be able to participate with other members in our friendly community. Being a member allows you to ask questions and get answers for those troublesome web development tasks!

In addition, as a member you'll be able to post your websites up for review. Using our unique website review system you can gain some amazing feedback from some of the best web developers around. This is a completely free service to all registered members.

Ready to register yet? Registration is 100% free. Click Here To Join Now!

Equal Height Columns w/Borders

Discussion in 'Javascript, AJAX, and JSON' started by BeccaT, Jul 8, 2012.

  1. Offline

    BeccaT New Member

    Message Count:
    4
    Likes Received:
    0
    Trophy Points:
    1
    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.


    BeccaT, Jul 8, 2012
    #1

  2. WDF Go Premium, Drop Ads

  3. Offline

    TheGAME1264 The Displaced Web Redneck Moderator

    Message Count:
    9,400
    Likes Received:
    1,253
    Trophy Points:
    113
    Gender:
    Male
    Location:
    Not from USA
    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.


    TheGAME1264, Jul 9, 2012
    #2
  4. Offline

    BeccaT New Member

    Message Count:
    4
    Likes Received:
    0
    Trophy Points:
    1
    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!


    BeccaT, Jul 9, 2012
    #3
(You have insufficient privileges to reply here.)

Share This Page