Skip navigation
Currently Being Moderated

Add padding to div

Mar 17, 2013 11:37 PM

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?

 
Replies
  • Currently Being Moderated
    Mar 18, 2013 12:20 AM   in reply to paul whitehead
     
    |
    Mark as:
  • Currently Being Moderated
    Mar 18, 2013 12:40 AM   in reply to Ben Pleysier

    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

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 18, 2013 6:07 AM   in reply to Al Sparber

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 18, 2013 6:59 AM   in reply to paul whitehead

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 18, 2013 7:10 AM   in reply to paul whitehead

    Any <p> within #container.

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 18, 2013 7:13 AM   in reply to paul whitehead

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 18, 2013 7:22 AM   in reply to paul whitehead

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 18, 2013 7:27 AM   in reply to paul whitehead

    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

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 18, 2013 7:26 AM   in reply to paul whitehead

    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*/

    }

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 18, 2013 8:15 AM   in reply to paul whitehead

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

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 18, 2013 8:26 AM   in reply to paul whitehead

    "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?

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 18, 2013 8:28 AM   in reply to paul whitehead

    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;

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 18, 2013 8:54 AM   in reply to paul whitehead

    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?

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 18, 2013 9:03 AM   in reply to paul whitehead

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 18, 2013 10:02 AM   in reply to paul whitehead

    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>

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points