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

Advertisement Advertisement Module
Collapse

Featured Images Featured Images Module
Collapse

Mediabistro Creative Sites Mediabistro Creative Sites Module
Collapse
Latest Topics Latest Topics Module
Collapse

Advertisement Advertisement Module
Collapse

Sponsors Sponsors Module
Collapse

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

  • DIV height in a liquid layout

    Hello,

    Having some issues with three aligned divs. Link to
    page --> http://www.s86design.com/fluid_test_site/Untitled-1.html

    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.

    Thanks

  • #2
    Your link is bROKEN.

    Comment


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

      Comment


      • #4
        http://www.s86design.com/fluid_test_...ntitled-1.html

        Comment


        • #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

          Comment


          • #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.

            Comment


            • #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 ( http://css-tricks.com/fluid-width-equal-height-columns/ ) 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.

              Comment


              • #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.

                Comment


                • #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 ( http://code.google.com/p/hyphenator/ ) 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.

                  Comment


                  • #10
                    Re:

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

                    Code:
                    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
                    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
                    <head>
                    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
                    <title>Untitled Document</title>
                    <style type="text/css" media="screen">
                    .box{width:300px;height:300px;background-color:orange;margin:5px;display:inline-block;vertical-align:top}
                    .box_high{width:300px;height:400px;background-color:orange;margin:5px;display:inline-block;vertical-align:top}
                    
                    </style>
                    </head>
                    
                    <body>
                    <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>
                    </body>
                    </html>
                    IE7 and under are a bit flaky on inline-block I think - you might want to check that out if they're important.

                    Comment


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

                      Comment


                      • #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 --> http://www.s86design.com/makennas_website/index.html

                        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.

                        Comment


                        • #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…

                          Comment


                          • #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?

                            Comment


                            • #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.

                              Comment

                              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 © 2014 Mediabistro Inc. call (212) 389-2000 or email us
                              Working...
                              X