Announcement

Collapse
No announcement yet.

DIV height in a liquid layout

Collapse
X
  • 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-16-2012, 09:40 PM.

            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

                              Search

                              Collapse

                              Sponsor

                              Collapse

                              Incredible Stock

                              Latest Topics

                              Collapse

                              • SniffySlug
                                Seeking Help on 123Design Project.
                                SniffySlug
                                I need to adjust the thickness of the inside in order to print the object but now I can't figure out how to increase the inside. its currently .4mm and it needs to be .7 or .8. I have tried the tweak,...
                                Yesterday, 10:07 PM
                              • TaMac
                                Reply to Portfolio in need of a review!
                                TaMac
                                Yup. That is a massive fail! Good to know however...

                                Here is the proper link

                                https://taramaclean.myportfolio.com/projects

                                Thanks!
                                Yesterday, 08:17 PM
                              • trevoz
                                quark 2016 and fontexplorer
                                trevoz
                                I have just installed QXP2016 and now I cannot run FontExplorer X Pro. Every time I run Font explorer QXP crashes. QXP will not open if Fontexplorer is open. Any one else having these problems
                                Yesterday, 05:29 PM
                              • Teejaa91
                                EAN13 batch design
                                Teejaa91
                                Hi everyone,

                                For my job in the wholesale I have a question (how to find a way to automate EAN13 barcode in my designs). I recently learned a lot about CSV files - excel and datamerge etc....
                                Yesterday, 02:28 PM
                              • KitchWitch
                                Reply to Portfolio in need of a review!
                                KitchWitch
                                Hi Tamac 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 anything...
                                Yesterday, 10:39 AM
                              GDF A division of Mediabistro Holdings Adweek | Mediabistro | Clio | Film Expo Group Contact Us | Terms of Use | Privacy Policy Copyright 2016 Mediabistro Holdings
                              Working...
                              X