21 Replies Latest reply: Apr 23, 2011 12:08 PM by Shan-Dysigns RSS

    Absolute/Relative & Expanding Divs

    Shan-Dysigns Community Member

      I don't know why I'm having such a hard time wrapping my head around this.

       

      I have a pretty specific layout from a client consisting of images and blocks of text.

       

      I have a main div wrapping everything with

       

      #centerBodyDiv {
          position:relative;
          width:100%;
          height:100%;
      }

       

      and a layout similar to this

       

      layout.jpg

      No matter what combination of absolute/relative I use for the divs, I can't keep all the contents inside the main div and/or have the main div expand to contents. Some images I have set to a relative with top:0px;  just to see where it positions itself, and I can't figure out the logic or what other element it is "relating" to position wise. Do I set only 1 div (example red div) to absolute and then use relative on all the others based on that absolute position? When doing so, I get close to what I want, but there is about a 2" gap below the last block of text and the wrapper div. What am I missing?

       

      Thanks...

        • 1. Re: Absolute/Relative & Expanding Divs
          SnakEyez02 CommunityMVP

          If we can assume the header and footer of the page lie outside of this diagram, then everything should go into one container. Also can we assume that the text blocks have a finite size and if they go over that size, the overflow is set to scroll (or auto)?  Then before moving forward, remove the 100% height and width.  Since this is a finite size, the design will never expand and if you set a height and width, you can set the left/right margin to auto to center is horizontally on the page.

           

          With those assumptions made, the red image and text blocks on the same z-index (1).  Then the yellow image (2), then the purple (3) and then the blue (4).  That way you get the proper overlays and shadow effects (might be easier with CSS3 if they are taking this much of a risk, see what their target is).  Now position EVERYTHING to the top left corner.  While you can use bottom and/or right, to make your life as a coder easier, measure everything from the top left.  That way you know where things overlap.  For instance if I add yellow and blue together (margins and padding aside) you have a total width of 993.  Since blue overlaps yellow at about the 80% mark you take 80% of 630 and position blue right:504.

           

          As for your last comment about a 2" gap, that is an unrealistic expectation of web design and needs to be explained to your client.  2" on a 30" widescreeen compared to 2" on a 15.4" laptop compared to 2" on an iPhone is completely different pixel and/or pecentage dimensions.  Best bet here is to either set a pixel or percentage margin to the bottom of your container.  If I could think of an anology to tell your client I would, but nothing comes to mind off the top of my head.

          • 2. Re: Absolute/Relative & Expanding Divs
            Shan-Dysigns Community Member

            I appreciate the time you took to respond, but one of my main questions was about absolute vs. relative positioning. Which (if any) of these elements should be absolute/relative?

             

            Your assumptions were correct. The diagram is just the center content of another div which houses a top banner and nav menu (then footer below everything). From what I thought, I should be able to assign the top image (red) to absolute and then everything else as relative to that image's position (using left and top to fine tune placement), but my trouble is how to measure what the relative position would be. I have this layout in Photoshop, and I've been measuring left and top according to the top left corner canvas, but it seems as if some elements aren't positioning the same (not even close) as to the measurements in Photoshop.

             

            I'm going to play around with this more - I would assume I need to use relative for ALL positioning in order for the containing div to expand as needed (since you said to take away its width and height (100%) value). I know this is just a matter of one little thing I'm overlooking that ends up affecting everything else.

            • 3. Re: Absolute/Relative & Expanding Divs
              SnakEyez02 CommunityMVP

              I would put everything as absolute positioned.  Relative  positioining keeps everything within the flow of the document.  This is  why the container you have is correct with relative positioning.   Absolute positioning takes the element out of the flow and places the  container relative to it's parent.

               

              So the red box at the top looks to be a few pixels in so I would say something like top:15px; right: 15px;. This is why you cannot have 100% width/height defined.  If the height and width is 100% and no elements are within the flow of the document the container ends up with a dimension of 0x0 because nothing is truly inside it.  By making the relatively positioned container and giving it a defined width and height equal to, or slightly greater than the content, you make sure the rest of the document (header & footer) flow around this drawing space, for lack of a better term.  Think of the relatively positioned container as an artboard within the document and everything with absolute positioning inside much like you would see in a program like InDesign with X and Y coordinates.  Even though it would be nice to have a feature like in InDesign where you can measure distance between objects and line things up, HTML is not that pretty, yet.

               

              So to your statement:

               

              From what I thought, I should be able to assign the top image (red) to absolute and then everything else as relative to that image's position (using left and top to fine tune placement), but my trouble is how to measure what the relative position would be.

              You are not actually measuring between the elements within this drawing space, but rather from the top left corner of your outer container.  Since the divs probably look like:

               

              <div id="container>

                <div id="redbox">

                  <div id="redbox_inner"></div> // This box gets positioned relative to redbox since it is inside redbox

                </div>  //Absolutel positioning goes relative to parent which is container

                <div id="textbox1"></div> //textbox1 is inside container, but outside redbox so it positions relative to container

              </div>

               

              Absolute positioning is very tricky to work with and takes some getting used to.  But once you get the hang of it you should be good to go.

              • 4. Re: Absolute/Relative & Expanding Divs
                Shan-Dysigns Community Member

                I guess I haven't had my "ah-ha" moment yet. I'm more inclined to understand visually than by text description. For some reason, I can't wrap my head around all the little bits when it comes to a non-conventional layout. I recently started updating some old websites of mine from tables to divs, and up until now, I haven't had a problem. If you don't mind, I created a stripped down version of what I'm working on. I went ahead and embedded the most basic css I am using (opposed to external sheet). Hopefully you can fill in some of the gaps to get me started? I think the code below (combined with my graphical diagram) should give a good enough example of what I'm trying to accomplish. Thanks again for any help. This is all I have left to finish this website's update.

                 

                I guess I'm stupid.. I can't figure out how to paste code without it being rendered... I will upload the file...

                 

                http://www.shan-dysigns.com/userForums/dreamweaver/test.php

                • 5. Re: Absolute/Relative & Expanding Divs
                  Nancy O. CommunityMVP

                  You realize you can do all of this without APDivs.

                   

                  Look at Not Just A Grid CSS system.

                  http://www.notjustagrid.com/demo.asp

                   

                  I used their 960.css to build this layout in under 10 minutes.

                  http://alt-web.com/notjustagrid/

                   

                   

                   

                  Nancy O.
                  Alt-Web Design & Publishing
                  Web | Graphics | Print | Media  Specialists 
                  http://alt-web.com/
                  http://twitter.com/altweb

                  • 6. Re: Absolute/Relative & Expanding Divs
                    Shan-Dysigns Community Member

                    That's a cool concept I will have to save for another day to learn. For now, I just need to get this done for where I'm currently stuck.

                    • 7. Re: Absolute/Relative & Expanding Divs
                      Shan-Dysigns Community Member

                      SnakEyez02,

                       

                      Did I lose you?

                      • 8. Re: Absolute/Relative & Expanding Divs
                        mytaxsite.co.uk CommunityMVP

                        Due to the specific layout requirements, you will be better off using AP Div to layout your design.  You can access this (in CS4 & CS5) byt going to:

                         

                        Insert >> Layout Objects >> AP Div

                         

                        This allows you to drag and drop your absolute positioned divs to an exact position.  I suggest try it on your test document to see if this works for you.

                         

                        Good luck.

                        • 9. Re: Absolute/Relative & Expanding Divs
                          adninjastrator CommunityMVP

                          First off... I can almost always guarantee that if a thread title has " AP divs" anywhere in it.... we have a problem.

                          The use of a declared position for <div>s should really be reserved for the very few instances when it is needed (maybe 5% or less).

                          Far from being the "non-conventional layout", using CSS to lay out you page is much more conventional and "Best Practice" than the use of giving page elements a declared ( Absolute/Relative) positions.

                          Please heed Nancy O's comments.. do it without using declared positions. Why? Because it just doesn't work very well!

                          Looking at your code... all your <divs> are position "relative" to where where they would normally be... which is exactly where they would normally be.. aligned to the left margin... one after (on top of) another... exactly as you have it coded.

                          If you really want to walk down the declared position path..  then you need to keep in mind the "Parent" rule. Giving an element a declared position...actual display will vary... depending on whether or not the Parent element ALSO has a declared position.... so it's not as clear as it may seem.

                          From an old post:

                           

                          One more thing about positioning. z-indexing only works with elements that have a declare position like absolute or relative, and how that element reacts to a declare position will depend on whether or not it's parent element also has a declare position.
                          So

                          Code:
                          #flash {
                          z-index:5;
                          }
                          will not work without ALSO giving it a declare position.
                          But the actual display of #flash will very depending on whether or not it's parent container (<div>) also has a declared position.

                          That is, if it's parent container DOES NOT also have a declared position, the child <div> will do 1 of 2 things.
                          If position:relative, it will position as desired but space will be left as though that element was still in the natural flow. So you may move the 500 X 100 element down and over, but a 500 X 100 space will be left, as though it was still there.
                          If position:absolute, child is positioned relative to browser window and that position does not change even if window contracts or expands.

                          So be sure to give a declared position to both the parent and the child <div>.

                          Example page using declared positions and z-indexing to sandwich Flash between 2 layers of text:
                          http://www.cidigitalmedia.com/tutorials/flash_div.html
                          View the source code or copy it and practice by changing z-index and positions.

                          Maybe this will help clear up any misunderstanding you have about declared positioning as well as the use of z-indexing:
                          More info here:

                          http://www.w3schools.com/css/pr_pos_z-index.asp

                           

                          Ignore the stuff you don't need but do realize that you need to wrap all your content in a "Parent" <div> that you position in the display window as you want. Then inside that "Parent", you can use absolute or relative positioning.

                          But I'd rather you didn't... use CSS instead!

                          However, wishing you the very best on your project!

                          Adninjastrator

                          • 10. Re: Absolute/Relative & Expanding Divs
                            Shan-Dysigns Community Member

                            DWILCOX01,

                             

                            You can access this (in CS4 & CS5) byt going to:

                            I'm not sure you read the whole post because it's not that I don't know how to use an APDiv - it's about the "how-to's" of using absolute vs. relative (pertaining to my specific layout).

                             

                            adninjastrator,

                             

                            The use of a declared position for <div>s should really be reserved for the very few instances when it is needed (maybe 5% or less).

                            What? I see them used all the time - even on some web-technical tutorial websites.

                             

                            Looking at your code... all your <divs> are position "relative" to where where they would normally be

                            Correct - that's because I stripped down the css to some basic declarations in order to have SnakEyez02 show me which div may or may not need absolute/relative positioning (since he mentioned I should use ALL absolute) - I kept them as relative so the divs would appear in order as they do in my diagram. That css code certainly isn't what's in my actual website - that code was created purely for him to show me what he was talking about. I appreciate the time you took to write all that, but none of it really relates to what SnakEyez02 and I were in the middle of (I hope he helps one last time), but if not, anyone else can take a crack at positioning what I have in the diagram while using whatever parts of my css I included. I'm not looking for a lesson on divs, I'm looking for clarification only pertaining to this wacky layout I was given.

                            • 11. Re: Absolute/Relative & Expanding Divs
                              SnakEyez02 CommunityMVP

                              Shan, I got caught up in one my projects yesterday so I didn't have a chance to look at it.  I'll try to get you an answer shortly.

                              • 12. Re: Absolute/Relative & Expanding Divs
                                SnakEyez02 CommunityMVP
                                <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
                                <html xmlns="http://www.w3.org/1999/xhtml">
                                <head>
                                <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
                                <title>Untitled Document</title>
                                <style type="text/css">
                                <!--
                                #container { border: 1px solid #000; height: 768px; width: 1024px; position: relative; }
                                
                                #red {
                                     width: 443px;
                                     height: 64px;
                                     position: absolute;
                                     top: 15px;
                                     left: 15px;
                                     background: #FF0000;
                                }
                                
                                #tb1 {
                                     width: 480px;
                                     height: 100px;
                                     position: absolute;
                                     top: 89px;
                                     left: 20px;
                                        background: #999;
                                }
                                
                                #blue {
                                     width: 363px;
                                     height: 241px;
                                     position: absolute;
                                     z-index: 5;
                                     top: 25px;
                                     left: 550px;
                                     background: #3CF; 
                                }
                                
                                #yellow {
                                     width: 630px;
                                     height: 312px;
                                     position: absolute;
                                     z-index: 4;
                                     top: 225px;
                                     left: 0px;
                                     background: #FF0;
                                }
                                -->
                                </style>
                                </head>
                                
                                <body>
                                <div id="container"> 
                                     <div id="red"></div>
                                    <div id="tb1"></div>
                                    <div id="blue"></div>
                                    <div id="yellow"></div>
                                </div>
                                </body>
                                </html>
                                
                                

                                 

                                 

                                Your example was too much to start with and you already had z-indexes and relative positioning. I put together the first 4 minus CSS3 shadows and effects.  It just takes time to put together and measure everything out.

                                • 13. Re: Absolute/Relative & Expanding Divs
                                  Shan-Dysigns Community Member

                                  I understand having to tend to other projects.

                                   

                                  Unfortunately, what you did was no different than waht I originally had (before I created a post). I guess I was not clear on having to actually define a height of the container when using absolute divs inside - I was looking for something that probably wasn't possible (using absolute divs inside a container which would expand as needed (without having to define its height).

                                   

                                  Sometimes I already have the answer but think there is a better (or more practical) way. Foir this case, it was simply defining the container height. Sorry for wasting time... but thank you to all...

                                  • 14. Re: Absolute/Relative & Expanding Divs
                                    Nancy O. CommunityMVP
                                    I was looking for something that probably wasn't possible (using absolute divs inside a container which would expand as needed (without having to define its height).

                                     

                                    <shaking head> If you reviewed the code in my example (not sure you ever looked at it), container height expands as needed. And no APDivs are required for this!!! </shaking head>

                                     

                                     

                                     

                                    Nancy O.
                                    Alt-Web Design & Publishing
                                    Web | Graphics | Print | Media  Specialists 
                                    http://alt-web.com/
                                    http://twitter.com/altweb

                                    • 15. Re: Absolute/Relative & Expanding Divs
                                      adninjastrator CommunityMVP

                                      I realize you may not be interested in doing page layout via CSS rather than AP/RP divs, but doing so may cause unforeseen problems with the page down the road. Future edits and updates that do not fit exactly into those boxes will throw the layout off. That's just one reason why it's not recommended as a "Best Practice"

                                      Using AP/RP divs for page layout is a DW technique, NOT a well accepted Web developer technique.

                                      If you would like to review more on the subject, here is a link that Nancy O posted a while back:

                                      http://apptools.com/examples/pagelayout101.php

                                      Best of luck on your project!

                                      Adninjastrator

                                      • 16. Re: Absolute/Relative & Expanding Divs
                                        Shan-Dysigns Community Member

                                        [Personal abuse deleted by moderator]

                                         

                                        Adninjastrator

                                         

                                        I realize you may not be interested in doing page layout via CSS rather than AP/RP divs

                                        It's not a matter of interest. It's a matter of a quick fix (for the time being).... that's all... [Personal abuse deleted by moderator].

                                        • 17. Re: Absolute/Relative & Expanding Divs
                                          Nancy O. CommunityMVP

                                          You've got this kind of twisted around, don't you Dude?

                                           

                                          I freely gave you the code necessary to pull this off. You chose to ignore it TWICE.  It took me approx 10 minutes to do what you still can't achieve after 3 days of asking for help.  Maybe if you had copied and pasted my code into a new page, you would have a) learned something new and b) impressed your client by now.

                                           

                                          I don't have any further interest in your disrespectful tone & pugnacious attitude.  Rest assured, I won't be wasting my time with you in the future.

                                           

                                          So long and best of luck on your career!

                                           

                                           

                                          Nancy O.

                                          • 18. Re: Absolute/Relative & Expanding Divs
                                            mytaxsite.co.uk CommunityMVP

                                            OK I have done something different without using APs.  The text block is completely flexible and it works as you want:

                                             

                                            <Click this link>

                                             

                                            Let us know if this meets with your strict requirements.

                                             

                                            Good luck.

                                            • 19. Re: Absolute/Relative & Expanding Divs
                                              Shan-Dysigns Community Member
                                              Let us know if this meets with your strict requirements.

                                              Thanks for replying, but your example doesn't take into effect of the wacky layout diagram I initially posted. The whole issue was how to position those divs (some with images, some with just text). I've solved what I needed to (for the time being). I have a little bit of time between now and when I need to finalize the layout by whatever correct means I learn. Some people expect me to simply copy/paste without knowing how/why  that particular code may work. I like to learn 'why' something works before I just apply it.

                                               

                                              Anyway, thanks again for replying...

                                              • 20. Re: Absolute/Relative & Expanding Divs
                                                adninjastrator CommunityMVP

                                                Hey man, show some respect!

                                                Nancy O has accumulated 12530 points.... that's because she has correctly solved one whole heck of a lot of OTHER PEOPLE'S problems.

                                                I have 435 points... even that tiny, little amount has cost me hundreds of hours of thought and time.....and you know, it's not really that big of a deal, free advice, I enjoy the challenge, but it does take up my time.... and I do appreciate when people say "Thanks". You have really failed to acknowledge the time and effort others are freely giving you!

                                                You mention donating a lot of time to the Adobe Forums... but I don't see you getting much credit for it. Don't get me wrong... getting credit is not all that...

                                                In fact, this is the only Forum I belong to that gives credit... most don't. But when you post asking for help and then reject with distane the FREE advice... that's just not right!

                                                As I metioned before, the use of AP/RP divs for page layout is a DW technique, not a Web developer technique. So if you are not satisfied with the advice here, why don't you pose the same question (Absolute/Relative & Expanding Divs) in a Web developer Forum like this and see how it flies:

                                                http://www.webdeveloper.com/forum/index.php

                                                I'm afraid you'll find the answer the same as you got here.

                                                Still wishing you the best,

                                                Adninjastrator

                                                • 21. Re: Absolute/Relative & Expanding Divs
                                                  Shan-Dysigns Community Member

                                                  Nancy,

                                                   

                                                  For what it's worth. I'm sorry for my harsh words.

                                                   

                                                  I know you were only trying to help. Looking back at the overall post, I realize I didn't see your second link (where you took my wacky layout and created a mock-up). I only saw the first link which was to the documented website for the grid stuff. At initial glance of that page and all the css sheets they were using, I knew I wasn't going to have time to learn al that within the 2 hour time window I had just to "get a layout mock-up" for my client. What turned me into an a-hole was the fact the post began to read as if "you must do it this way or you are stupid". I didn't like the shaking head bit - personal reasons of past bad memories - that's what lit my fire. My only suggestion is maybe be aware "online phrasology" can lead to many misinterpretations - I know first hand because when I helped in the Flash forums, my responses were short, to the point, and factual (without all the sugar-coating), and I felt too many times I needed to explain my words even after I helped the person (others would chime in after the fact and tell me I was rude - again, after I spent a lot of my own time on those forums). That's where most of my anger comes from...

                                                   

                                                  Anyway, if you are still reading... now that I have some breathing room, I looked at your example (again, I didn't notice it until late last night). After looking through all the different linked stylesheets, I realized only a few were needed. After looking at the declarations, I can see now why you were trying to get my attention on this. I'm sure you understand, some people were taught (actually I've had to teach myself everything) a certain way, and anything new that comes along may be overlooked in the beginning. I consider myself a very inteligent person, so when I come across I just can't "get", it makes me hot-headed because I feel "I should know this" - but when all you've learned says differently or doesn't work the way it's documented, a person can become quite frustrated - not to mention the pressures of clients (especially when they seem to become less and less educated about what they want).

                                                   

                                                  So, again, for what it's worth - I'm sorry... thanks for showing me this link afterall... once I fully explore it, I'm sure it will be the ultimate solution to something that is new to me (wacky, non-conventioal layouts).