23 Replies Latest reply: Mar 18, 2013 10:02 AM by Ben Pleysier RSS

    Add padding to div

    Paul Whitehead Community Member

      I'm new to fluid grid layouts.  I've learned the little things like you have to adjust the mobile grid if you want everything to change on all grids.  I have my type css in a seperate file.  The one thing im having trouble with though is when i hadd padding to a div it moves it down unless i bring the % width down.  if i leave the padding alone and i have a div side by side at 49.ish% they stay side by side just fine.  The minute i add padding of 5px all around i must reduce the size of the divs to 48% each. why is this?  as soon as i adjust padding in any grid layout if its fluid, is it normal to have to adjust the %'s in the divs to make it look right?

        • 2. Re: Add padding to div
          ALsp Community Member

          Hi Ben,

           

          I'm not completely comfortable yet with box-sizing. For general sites

          I'm just not sure IE7 is dead enough

           

          --

          Al Sparber - PVII

          http://www.projectseven.com

          The Finest Dreamweaver Menus | Galleries | Widgets

          Since 1998

          • 3. Re: Add padding to div
            Ben Pleysier MVP

            Hi Al,

             

            About three months ago I was forced to upgrade IE7 on my wife's laptop because of annoying messages from MS. She now has IE8.

             

            From the above, I deduced that she would not have been singled out and that all machines running IE7 and below would have received the same message. Hence my view is that IE7 is dead.

             

            My use of box-sizing is a consequence of my New Year's resolution; or was it my sighting of Bacchus? Can't remember, but I have been using it ever since with great success.

             

            Box-sizing has eased the pain of continually having to resize my elements because of introduced padding.

            • 4. Re: Add padding to div
              Paul Whitehead Community Member

              I just dont get it, what is the soluation?

              • 5. Re: Add padding to div
                osgood_ MVP

                The solution would be to NOT add any padding to your <divs> Instead add the padding to elements inside the <div>

                 

                So for instance if you have this:

                 

                <div id="container"><p>This is some text</p></div>

                 

                Instead of adding the padding to the 'container' like:

                 

                #container {

                padding: 20px 15px 20px 15px; /*top,right,bottom,left*/

                }

                 

                Add the padding to the paragraph tag instead:

                 

                #container p {

                padding: 20px 15px 20px 15px; /*top,right,bottom,left*/

                }

                 

                If you add padding to a container which has a specific width set then the padding gets added to the overall width of the conatiner hence why your containers move to the next line where there is more room for them to sit.

                 

                This becomes more of an issue with mobile sites because the containers are set using percentage widths and trying to work out padding in percentages is a bit hit and miss.

                 

                Its much easier if you have a set width container specified in px because you just subtract the padding from the width like:

                 

                #container {

                width: 360px; /*real width 400px - 360px + 20px right/left padding)

                padding: 20px 20px 20px 20px; /*top,right,bottom,left */

                }

                 

                BUT that isnt much help when creating mobile designs.

                • 6. Re: Add padding to div
                  Paul Whitehead Community Member

                  so #container p is saying look for the <p> tag inside the #container that its in?

                  • 7. Re: Add padding to div
                    MurraySummers ACP/MVPs

                    Any <p> within #container.

                    • 8. Re: Add padding to div
                      osgood_ MVP

                      pwhiteheadnj732 wrote:

                       

                      so #container p is saying look for the <p> tag inside the #container that its in?

                       

                      Yes, that's it.

                       

                      You can target what ever like that

                       

                      Heading tag:

                      #container h1 {

                      }

                       

                      Image

                      #container img {

                      }

                       

                      Maybe you use a span tag

                      #container span {

                      }

                       

                      You might use a class on an element:

                      #container .className {

                      }

                       

                      Anything really.

                      • 9. Re: Add padding to div
                        Paul Whitehead Community Member

                        I dont like using the h tags because of how they break the div to the next line.  whta is a good tag that i should use for custom text styles?  ive been told never to edit  the default tags.

                        • 10. Re: Add padding to div
                          MurraySummers ACP/MVPs

                          ive been told never to edit  the default tags.

                           

                          That's nonsense. And using CSS it's quite simple to manage the margins and display mode of any tag. Custom text styles can be applied to <p> tags or <span> tags or whatever tag contains the text.

                          • 11. Re: Add padding to div
                            Paul Whitehead Community Member

                            doesnt <p> make a line break?

                            • 12. Re: Add padding to div
                              osgood_ MVP

                              pwhiteheadnj732 wrote:

                               

                              I dont like using the h tags because of how they break the div to the next line.  whta is a good tag that i should use for custom text styles?  ive been told never to edit  the default tags.

                               

                              Not sure what you mean by h tags break the <div> to the next line?

                               

                              You can create custom classes like:

                               

                              <p class="myCustomClass">Some text</p>

                               

                              .myCustomClass {

                              css attributes go here

                              }

                               

                              Classes are used IF you have duplicate areas on the same page which need to use the same css attributes.

                               

                              ids can be used if the css attributes only appear once

                               

                              <p id="myCustomID">Some text</p>

                               

                              Your class and id names can be anything you like but can't start with a number

                              • 13. Re: Add padding to div
                                osgood_ MVP

                                pwhiteheadnj732 wrote:

                                 

                                doesnt <p> make a line break?

                                No <br /> makes a line break.

                                 

                                If you want less space between paragragphs you have to set the margin and padding:

                                 

                                p {

                                margin: 0;

                                padding: 5px 5px 5px 5px; /*top,right,bottom,left*/

                                }

                                • 14. Re: Add padding to div
                                  Paul Whitehead Community Member

                                  Another thing that would  be helpful is, what does clearing mean in the css properties?  clearing left, right or both. i messed around with it and got the results im looking for but what is it exactly for?  Thanks for all the help guys!

                                  • 15. Re: Add padding to div
                                    MurraySummers ACP/MVPs

                                    <p> is a block tag. Block tags fill the width of their container by default. Therefore, two adjacent <p> tags will be adjacent, but on separate lines (and will be separated vertically by the larger of the margins of the two <p> tags). You can call this a 'line break' but it's not really. All block tag would behave this way. It pays to be familiar with which tags are block and which are inline....

                                    • 16. Re: Add padding to div
                                      MurraySummers ACP/MVPs

                                      "Clearing" refers to floated elements and their containers. For example -

                                       

                                      <div style="background-color:green;">

                                      <img style="float:left; height:100px;width:100px;" src="">

                                      </div>

                                       

                                      Put this on a blank HTML page and look at it in DW's Live view. You would expect to see an image placeholder within a container with a green background, but you don't. You just see an image placeholder.

                                       

                                      Now change the code to this -

                                       

                                      <div style="background-color:green;">

                                      <img style="float:left; height:100px;width:100px;" src="">

                                      <div style="clear:left;"></div>

                                      </div>

                                       

                                      Now you see the container with a green background. Why didn't you see it before? You didn't see it for this reason: floated elements are removed from the normal flow of the code (in order for them to 'float'). When the element is removed from the flow of the code, the container div collapses around its non-floated content. Since there is no non-floated content, it collapses to a single line with no height. Thus you cannot see the green color. By adding the element with a clear:left style before closing the container div, you clear the float, and the container can then see that it must wrap the 100px tall image placeholder - the green color appears!

                                       

                                      It's important to clear floats within containers before closing the container!

                                       

                                      Here's another way to do that - starting with the original code:

                                       

                                      <div style="background-color:green;overflow:hidden;">

                                      <img style="float:left; height:100px;width:100px;" src="">

                                      </div>

                                       

                                      The overflow:hidden forces the container to clear the floats, and therefore wrap its contents floated or not.

                                       

                                      Make sense?

                                      • 17. Re: Add padding to div
                                        osgood_ MVP

                                        Clearing is used when html elements are floated.

                                         

                                        You often need to put two containers/elements side-by-side so you would use the float css property for doing this.

                                         

                                        That then takes the containers/elements out of the natural html flow as they appear 'invisible' to the whatever follows them in the html code so you need to 'clear' the floated containers/elements.

                                         

                                        There is a couple of options for doing this:

                                         

                                        1) You can use clear:both; on the following item, so if a paragraph was to follow a floated container

                                         

                                        .myCustomClass {

                                        clear: both;

                                        }

                                        <p class="myCustonClass">Some text</p>

                                         

                                        That would position the paragraph in the correct html flow, after the floats.

                                         

                                        2) You can use overflow:hidden; on the parent wrapper which contains the floated containers:

                                         

                                        #parent {

                                        overflow: hidden;

                                        }

                                         

                                        <div id="parent">

                                        <div>This is is floated</div>

                                        <div>This is is floated</div>

                                        </div>

                                         

                                         

                                        I rarely if ever have the necessity to use clear: left or clear: right;

                                        • 18. Re: Add padding to div
                                          Paul Whitehead Community Member

                                          and because im using the floating layout in dreamweaver i i have to put 2 classes with my text correct like this "<div id="right_news" class ="fluid topBoxes">" this way it has the class of fluid that dreamweaver gives me and my text class. right?

                                          • 19. Re: Add padding to div
                                            osgood_ MVP

                                            pwhiteheadnj732 wrote:

                                             

                                            and because im using the floating layout in dreamweaver i i have to put 2 classes with my text correct like this "<div id="right_news" class ="fluid topBoxes">" this way it has the class of fluid that dreamweaver gives me and my text class. right?

                                             

                                            Depends really,

                                             

                                            Can you not combine the id css and the class css into the one id?

                                             

                                            What I'm saying is there a reason why the fluidtopBoxes css can't go with the right_news css?

                                            • 20. Re: Add padding to div
                                              Paul Whitehead Community Member

                                              they are 2 different classes. fluid is the default one dreamweaver made up and topboxes is for the text. take a look at Http://beauwhoop.com i think im on the right track.

                                              • 21. Re: Add padding to div
                                                osgood_ MVP

                                                pwhiteheadnj732 wrote:

                                                 

                                                they are 2 different classes. fluid is the default one dreamweaver made up and topboxes is for the text.

                                                 

                                                One is an id and one is a class. If there is no need for the class which is usually added for a specific reason then that css can be combined with the id css.

                                                 

                                                I can't tell as I would need to see why you have an id and a class attached to the save <div>. There can be legitimate reasons but also Dreameaver might just be adding code bloat, which is what happens when Dreamweaver does most of the work automatically. I write all my css by hand so have total control over what is required and what is not required.

                                                • 22. Re: Add padding to div
                                                  Paul Whitehead Community Member

                                                  dreamweaver wrote a class called .float for the fluid grid layout.  I have all my typography css in another file so things dont get mixed up.  So i have my own class call topBoxes so anything inside the topBoxes it will be a certain way for text only.  Because there is a .float class in another style sheet that needs to be mentioned too. 

                                                   

                                                    <div id="left_news" class="fluid topBoxes"> what goes in box.</div>

                                                  • 23. Re: Add padding to div
                                                    Ben Pleysier MVP

                                                    Copy and paste the following into a new document and see that the fourth box will not fitt on the sam line as the first three. This is because of the padding.

                                                    <!doctype html>

                                                    <html>

                                                    <head>

                                                    <meta charset="utf-8">

                                                    <title>Untitled Document</title>

                                                    <style>

                                                    body {

                                                        width: 960px;

                                                        margin: auto;

                                                    }

                                                    .mybox {

                                                        width: 25%;

                                                        float: left;

                                                        border: thin #CCC solid;

                                                        padding: 10px;

                                                    }

                                                    </style>

                                                    </head>

                                                     

                                                    <body>

                                                    <div class="mybox">

                                                      <p>Ullamco laboris nisi ut labore et dolore magna aliqua. Cupidatat non proident, in reprehenderit in voluptate eu fugiat nulla pariatur. Lorem ipsum dolor sit amet, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis nostrud exercitation cupidatat non proident, qui officia deserunt. Ullamco laboris nisi velit esse cillum dolore lorem ipsum dolor sit amet.</p>

                                                    </div>

                                                    <div class="mybox">

                                                      <p>Ullamco laboris nisi ut labore et dolore magna aliqua. Cupidatat non proident, in reprehenderit in voluptate eu fugiat nulla pariatur. Lorem ipsum dolor sit amet, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis nostrud exercitation cupidatat non proident, qui officia deserunt. Ullamco laboris nisi velit esse cillum dolore lorem ipsum dolor sit amet.</p>

                                                    </div>

                                                    <div class="mybox">

                                                      <p>Ullamco laboris nisi ut labore et dolore magna aliqua. Cupidatat non proident, in reprehenderit in voluptate eu fugiat nulla pariatur. Lorem ipsum dolor sit amet, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis nostrud exercitation cupidatat non proident, qui officia deserunt. Ullamco laboris nisi velit esse cillum dolore lorem ipsum dolor sit amet.</p>

                                                    </div>

                                                    <div class="mybox">

                                                      <p>Ullamco laboris nisi ut labore et dolore magna aliqua. Cupidatat non proident, in reprehenderit in voluptate eu fugiat nulla pariatur. Lorem ipsum dolor sit amet, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis nostrud exercitation cupidatat non proident, qui officia deserunt. Ullamco laboris nisi velit esse cillum dolore lorem ipsum dolor sit amet.</p>

                                                    </div>

                                                    </body>

                                                    </html>

                                                    Now add the following style rules to the document and view it in your browser

                                                    <!doctype html>

                                                    <html>

                                                    <head>

                                                    <meta charset="utf-8">

                                                    <title>Untitled Document</title>

                                                    <style>

                                                    * {    -moz-box-sizing: border-box;

                                                        -webkit-box-sizing: border-box;

                                                        box-sizing: border-box;

                                                    }

                                                    body {

                                                        width: 960px;

                                                        margin: auto;

                                                    }

                                                    .mybox {

                                                        width: 25%;

                                                        float: left;

                                                        border: thin #CCC solid;

                                                        padding: 10px;

                                                    }

                                                    </style>

                                                    </head>

                                                     

                                                    <body>

                                                    <div class="mybox">

                                                      <p>Ullamco laboris nisi ut labore et dolore magna aliqua. Cupidatat non proident, in reprehenderit in voluptate eu fugiat nulla pariatur. Lorem ipsum dolor sit amet, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis nostrud exercitation cupidatat non proident, qui officia deserunt. Ullamco laboris nisi velit esse cillum dolore lorem ipsum dolor sit amet.</p>

                                                    </div>

                                                    <div class="mybox">

                                                      <p>Ullamco laboris nisi ut labore et dolore magna aliqua. Cupidatat non proident, in reprehenderit in voluptate eu fugiat nulla pariatur. Lorem ipsum dolor sit amet, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis nostrud exercitation cupidatat non proident, qui officia deserunt. Ullamco laboris nisi velit esse cillum dolore lorem ipsum dolor sit amet.</p>

                                                    </div>

                                                    <div class="mybox">

                                                      <p>Ullamco laboris nisi ut labore et dolore magna aliqua. Cupidatat non proident, in reprehenderit in voluptate eu fugiat nulla pariatur. Lorem ipsum dolor sit amet, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis nostrud exercitation cupidatat non proident, qui officia deserunt. Ullamco laboris nisi velit esse cillum dolore lorem ipsum dolor sit amet.</p>

                                                    </div>

                                                    <div class="mybox">

                                                      <p>Ullamco laboris nisi ut labore et dolore magna aliqua. Cupidatat non proident, in reprehenderit in voluptate eu fugiat nulla pariatur. Lorem ipsum dolor sit amet, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis nostrud exercitation cupidatat non proident, qui officia deserunt. Ullamco laboris nisi velit esse cillum dolore lorem ipsum dolor sit amet.</p>

                                                    </div>

                                                    </body>

                                                    </html>