11 Replies Latest reply on Mar 9, 2010 1:14 PM by Fitz21

    Trouble Understanding CSS Layout and Padding

    Fitz21 Level 1

      Hi,

       

      I'm having some serious problems understanding CSS layout techniques and the impact of padding and was hoping I could get some help.

       

      Here are a couple of pages that show examples of what I don't "get". The first has padding that causes the layout to look right. The second doesn't have padding but doesn't lay out as I would expect. Also, the amount of text affects the "bottom" div as well. I'm an old hand at HTML and could do this layout in my sleep using tables. Css is a different, frustrating story.


      http://www.libertywebmarketing.com/test/1.html

      http://www.libertywebmarketing.com/test/2.html

       

      Thanks.

       

      Fitz21

        • 1. Re: Trouble Understanding CSS Layout and Padding
          M.R.Biesheuvel Level 3

          Padding adds to the container width or height.

           

          For instance if I declare:

           

          #container{

          width:100px;

          padding-left:10px;

          padding-right:10px;

          }

           

          The total width of the container is now 120px. The text lines out at 10 px from the left and the right and these values have been added to the total width of the container.

           

          Another example

           

          #container{

          width:100px;

          height:100px;

          padding: 10px; /* meaning a padding of 10px on top,rightbotton and left */

          }

           

          The total witdh and height of the container is now 120px * 120px. The text is aligned 10px from the top,right,bottom and left and the container has increased to this size at the top,right,bottom, left. So in total the width and height has become 120px.

           

          Hope this is any help for you,

           

           

          M.R.Biesheuvel

          www.sportjegeestgezond.nl

          1 person found this helpful
          • 2. Re: Trouble Understanding CSS Layout and Padding
            Fitz21 Level 1

            Yes. That is definately helpful.

             

            What I don't understand is why this page has layout errors on it (http://www.libertywebmarketing.com/test/2.html )
            I would expect it to look like 1.html but it doesn't.

             

            And why does 1.html only look "right" with padding? Why are there spaces above and below the "top" and "bottom" Divs depending on the amount of text?

             

            Thanks.

             

            Fitz21

            • 3. Re: Trouble Understanding CSS Layout and Padding
              M.R.Biesheuvel Level 3

              The id portFolioWhite has been placed two times in the html code. An indentifier must be unique to one element on the same page, I thiink that is major part of the problem.

              • 4. Re: Trouble Understanding CSS Layout and Padding
                Fitz21 Level 1

                That's interesting. My goal was to have these boxes continue down the page with the first one having the photo on the left, the second one of the right, third on the left, and so on (alternating left, right, left, right, etc.)
                Is it simply wrong to use Div tags and repeat them throughout the page? (I could do this with tables in 5 minutes but wanted to use CSS)

                 

                Thanks again for all of your help.

                 

                Fitz21

                • 5. Re: Trouble Understanding CSS Layout and Padding
                  M.R.Biesheuvel Level 3

                  Now it´s not wron to use several div´s in one page but it´s wrong to give them the same identity

                  .

                   

                  You can solve this problem with css classes. Multiple tags can share the same class and can even have more classes then one.

                   

                   

                   

                  M.R.Biesheuvel

                  www.sportjegeestgezond.nl

                  1 person found this helpful
                  • 6. Re: Trouble Understanding CSS Layout and Padding
                    osgood_ Level 8

                    Fitz21 wrote:

                     

                    Why are there spaces above and below the "top" and "bottom" Divs depending on the amount of text?

                     

                     

                    Another css mystery is the default margins on such tags as the paragraph tag. They will cause the spaces, above and below, which you are seeing unless you zero them out

                     

                    p {

                    margin: 0 0 0 0;

                    padding: 0 0 0 0;

                    }

                     

                    You can also zero the margin/padding out on the first paragraph or last paragraph using inline css:

                     

                    <p style="margin: 0; padding: 0;">Some text. Some text</p>

                     

                    One tip when overcoming the padding issue is to use it sparingly.

                     

                    For instance padding is only added to the overall width of an element if you set it at a specific width

                     

                    If you add padding to a paragraph tag within a specific width box it will have no effect. So if I want 20px padding left and right on a box which is set to 400px I dont add it to the box I add it to the paragraph tag inside the box. The box stays at 400px wide but effectively has 20px left right padding.

                     

                    If I add the padding to the box the box has now become 440px wide, not probably what you want.

                    • 7. Re: Trouble Understanding CSS Layout and Padding
                      Dreamer101.1 Level 1

                      Don't know if you have a good manual that describes CSS layout concepts and gives you practical hands-on  experience.

                       

                      My guess is that you don't have a good textbook.   You need to works thru  a concept of a 1) Layer and Parent/Child Relationship and to know when it is appropriate to use and how a browers interpret it  when you for example enlarge the font size, CTRL +.; 2) How 'Div Tag' layout behaves vs. a Layer.

                       

                      Two textbooks help me a lot:

                       

                      1. Dreamweaver 8 for Dummies by Janine Warner

                       

                      2.  Dreamweaver 8 The Missing Manual by David Sawyer McFarland

                       

                      You need both to understand the CSS Layout Technology plus a lot of re-reading and practice.  Good Luck

                      • 8. Re: Trouble Understanding CSS Layout and Padding
                        Fitz21 Level 1

                        Thank you for the help.There's a lot of valuable info in these answers that I'm going to have to study. I never thought of applying classes to Div tags, but I guess I have to start learning somewhere. I'm not sure how to use the technique, but I'll definately look into it. If I could wake up tomorrow and know what you all know simply by wishing it, I would.

                         

                        I see that there are many things I have to learn about using CSS and I'd really like to see some real world examples that don't look like typical cheesy CSS designs with columns. If I were going to design this page using HTML, I would probably do something like this: http://www.libertywebmarketing.com/test/3.html
                        (The last two tables show the table structure and use of a spacer. I know this a seriously antiquated way of doing it, but it's to illustrate what I'm trying to accomplish: Namely, staggered, left/right alternating boxes that will expand properly depending on the amount of copy or the vertical height of the photo in them.) 

                         

                        Dreamweaver 101,

                         

                        I have "Dreamweaver 8 The Missing Manual" by David Sawyer McFarland, but I find it really concentrates on "typical CSS designs" that look like Content mangement templates. While I agree it's a valuable book, there's nothing in there I have found that addresses anything like what I'm trying to do. Is the Dummies book better for atypical layouts?

                         

                        Again, thank you all.

                         

                        Fitz21

                        • 9. Re: Trouble Understanding CSS Layout and Padding
                          Fitz21 Level 1

                          I guess what I'm asking is, "How would YOU design this using CSS?"
                          http://www.libertywebmarketing.com/test/3.html

                          Fitz21

                          • 10. Re: Trouble Understanding CSS Layout and Padding
                            Nancy OShea Adobe Community Professional & MVP

                            Fitz21 wrote:

                             

                            I guess what I'm asking is, "How would YOU design this using CSS?"
                            http://www.libertywebmarketing.com/test/3.html

                            Fitz21

                             

                            With CSS rounded corners, floats and margins:

                             

                            http://alt-web.com/DEMOS/CSS-Rounded-Corners.shtml

                             

                            http://alt-web.com/DEMOS/CSS2-Captions-on-floated-images.shtml

                             

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

                            • 11. Re: Trouble Understanding CSS Layout and Padding
                              Fitz21 Level 1

                              Wow! That is a great resource.

                               

                              Thanks.

                               

                              Fitz21