Announcement Announcement Module
No announcement yet.
DIV height in a liquid layout Page Title Module
Move Remove Collapse
Search Search Module

Advertisement Advertisement Module

Latest Topics Latest Topics Module

  • KitchWitch
    Reply to Help With Pattern Fills - Need an effect similar to this!
    Hi Tymyshoez and welcome to GDF.

    We ask all new members to read very important links here and here. These explain the rules, how the forum runs and a few inside jokes. No, you haven't...
    Today, 02:22 PM
  • seamas
    Reply to Feedback for a coffee company logo!
    I do appreciate the fact that there are no coffee beans in the logo, but the logo you mader has a couple issues.

    1: Background image. Why is it there? It isn't part of the logo, is it?...
    Today, 02:19 PM
  • tymyshoez
    Help With Pattern Fills - Need an effect similar to this!
    First post, my apologies if this is somewhere in the ether of this forum. I'm trying to create a "stitched" effect in Adobe Illustrator. I feel like I'm close, but I can't figure out how to...
    Today, 02:18 PM
  • Cosmo
    Reply to Hello
    How do you overcome it? You work for a competent art director that will help you learn to not miss it. Freelancing right out of school is a recipe for failure....
    Today, 02:04 PM
  • KitchWitch
    Reply to Any one recognize this typeface?
    Hi Major and welcome to GDF.

    We ask all new members to read very important links here and here. These explain the rules, how the forum runs and a few inside jokes. No, you haven't done...
    Today, 02:02 PM

Conversation Detail Module
  • Filter
  • Time
  • Show
Clear All
new posts

  • DIV height in a liquid layout


    Having some issues with three aligned divs. Link to
    page -->

    On this page i have three colored div blocks. I have set them each to 30% width and when i shrink and enlarge the browser window they behave as i want them to. My problem is they will not maintain a consistent height. Is there any way to set a height% so all of the divs will appear to be the same distance from the Photo Gallery div below them regardless of the content inside of them? Any help would be greatly appreciated. If you notice any other issues with the page you want to comment on please let me know. This is my first liquid site and i have just put this together for some practice.


  • #2
    Your link is bROKEN.


    • #3
      Missing colon
      "I used to wonder what friendship could be, Until you all shared its magic with me." - Jesus Christ


      • #4


        • #5
          If you want them at a consistant height, you will have to specify that. However, make sure that you keep your paragraphs in the div so that they are the right height. What's happening is that your content is creating your height, and rightly so. That is how you really want that to be. That way, as you put more content into those areas, the color stays constant.
          "Go ahead, make your logos in PS. We charge extra money to redraw your logo into vector art so it can be printed on promotional product. Cha CHING! " - CCericola


          • #6
            Your probably best off with a repeating background image to virtually create the columns. Though you will have to sacrifice the liquid columns. Instead of liquid columns an acceptable alternative is media queries to change the width of the columns for different devices. You would also need to change the repeating background image as the widths for the columns change. Anything else I would recommend is probably not worth the time to implement unless your already very familiar with the technology. Perhaps you should rethink this part of the design because what your trying to do really doesn't mesh well with the technology. Anything you do to support it will end up being a hack. There is a CSS3 module called flexible box that would make this easy to do but very few browsers support it. Also the standard implementation just changed so it is not very stable.
            Last edited by tZ; 04-17-2012, 02:40 AM.


            • #7
              If there's one place where CSS is inadequate, you've hit upon it getting multiple fluid columns to line up along the bottom. I've used the solutions discussed here ( ) several times with varying degrees of success. Most solutions, as tZ mentioned, are sort of hacks and they tend not to work perfectly in some browsers.

              You know, all things considered this sort of multiple column layout is most easily accomplished with another widely used hack with a long and rich history: misusing tables for layout purposes. I could quote all the reasons not to use tables to get where you want to go, but in some instances when you're faced with one imperfect solution as opposed to another, you just do what works or you re-evaluate the problem and approach it from a different angle that avoids the problem (and the hack) altogether.


              • #8
                Thanks for the replies... currently trying out a few different solutions above to see what works best for me right now.

                Now that you guys have me thinking... i was wondering if there might be another way to keep a consistent height. Is there any way to hyphenate text so that a longer word like "uncontrolled" could adjust to the width of the box on its own instead of automatically popping the word down to the next line automatically while scaling? I believe this would solve my problem as long as i kept the content of the box consistent.. say at least but no more than three lines of text for each box.


                • #9
                  Originally posted by bROKEN View Post
                  Is there any way to hyphenate text so that a longer word like "uncontrolled" could adjust to the width of the box on its own instead of automatically popping the word down to the next line...
                  You could place soft hyphens in the words where you'd like them to break when needed. For example: . (I needed to use an image because the forum software wouldn't let me insert it directly.) Some older browsers won't support soft hyphens, however.

                  There's also this Javascript ( ) that will hyphenate dynamically, but at some point it's just best to quit fighting the limitations of HTML and realize that it's just not as controllable as print.


                  • #10

                    I think inline-block would do this for you. Have a look at this:

                    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "">
                    <html xmlns="" xml:lang="en" lang="en">
                    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
                    <title>Untitled Document</title>
                    <style type="text/css" media="screen">
                    <div class="box"></div>
                    <div class="box_high"></div>
                    <div class="box"></div>
                    <div class="box_high"></div>
                    <div class="box"></div>
                    <div class="box"></div>
                    <div class="box_high"></div>
                    <div class="box"></div>
                    <div class="box"></div>
                    <div class="box"></div>
                    <div class="box"></div>
                    IE7 and under are a bit flaky on inline-block I think - you might want to check that out if they're important.


                    • #11
                      I am also agree with markjeff so follow his instruction.....


                      • #12
                        Hey guys,

                        Thanks for all of the responses. In the end I used the hyphenation suggested by <b> to solve my problem. Still isn't a perfect fix but i think the layout helps detract from the visual impact of the staggered heights. Plus it provided the perfect opportunity to manually insert java script as I've never done that before. If you're interested... take a look -->

                        Definitely a few bugs to work out with the page as a whole but im at least happy with the height of the divs as the page is scaled. Will post the rest of my questions in separate posts. Thanks again guys, really appreciate the time.


                        • #13
                          The boxes aren't equal height for me. Probably 99% of time they won't be for anyone with the method you used. Though if it works in your browser…


                          • #14
                            oK..I have tried the inline block. People keep suggesting this method but how does it address my problem? The blocks are not scalable, so thy look odd in the liquid layout. Is there something I'm missing?


                            • #15
                              Are you trying to create the illusion that text is flowing between the different boxes like you would do Indesign? There are actual properties in CSS3 to do just that. I *believe they have a wide range of support in modern browsers except IE.


                              Mediabistro A division of Prometheus Global Media home | site map | advertising/sponsorships | careers | contact us | help courses | browse jobs | freelancers | content | member benefits | reprints & permissions terms of use | privacy policy Copyright © 2015 Mediabistro Inc.