SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Enthusiast semicolon's Avatar
    Join Date
    Mar 2010
    Posts
    86
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Talking Controlling the Padding around a Float-Right Box

    How do I add 30px padding to the left and bottom of BANANA in the following example?

    Code HTML4Strict:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title>FLOAT TEST</title>
     
    <style type="text/css">
     
    DIV.GUTTERS
    {margin: 30px;}
     
    #BANANA
    {height: 250px; width: 500px;
    background-image: url('http://publish.popalerts.com/bin/profile/tn/1228112934.png');
    border: 3px 3px 3px 3px;
    border-style: solid;
    border-color: BLACK;
    display: block;
    float: right;
    padding: 30px;
    }
     
    #GORILLA
    {background-color: BLUE;
    border-color: RED;
    border: 3px 3px 3px 3px;
    border-style: solid;
    color: WHITE;
    text-align: JUSTIFY;
    padding: 30px;
    }
     
    #CONTENT {background-color: MISTYROSE; color: BLACK; text-align: JUSTIFY;}
     
    </style>
    </head>
     
    <body>
     
    		<DIV CLASS="GUTTERS">
     
    <div style="padding: 5px 20px 5px 5px; background-color: PALEGREEN; color: Black; height: 150px;">
    YADA YADA YADA
    </div>
     
    <div style="padding: 5px 20px 5px 5px; background-color: LAVENDER; color: Black; top: 80px; height: 300px;">
    BABBALOOOOOOOOOOOEY
    </div>
     
    <!-- \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ BANANA \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ -->
    <!-- \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ GORILLA \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ -->
    <div id="BANANA">
    <div id="GORILLA">
    QUOTE BOX QUOTE BOX QUOTE BOX QUOTE BOX QUOTE BOX QUOTE BOX QUOTE BOX QUOTE BOX QUOTE BOX QUOTE BOX QUOTE BOX QUOTE BOX QUOTE BOX QUOTE BOX QUOTE BOX QUOTE BOX QUOTE BOX QUOTE BOX QUOTE BOX QUOTE BOX QUOTE BOX QUOTE BOX QUOTE BOX QUOTE BOX QUOTE BOX QUOTE BOX QUOTE BOX QUOTE BOX QUOTE BOX
    </div>
    </div>
     
    <!-- \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ CONTENT \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ -->
    <div id="CONTENT">
    CONTENT HERE CONTENT HERE CONTENT HERE CONTENT HERE CONTENT HERE CONTENT HERE CONTENT HERE CONTENT HERE CONTENT HERE CONTENT HERE CONTENT HERE CONTENT HERE CONTENT HERE CONTENT HERE CONTENT HERE CONTENT HERE CONTENT HERE CONTENT HERE CONTENT HERE CONTENT HERE CONTENT HERE CONTENT HERE CONTENT HERE CONTENT HERE CONTENT HERE CONTENT HERE CONTENT HERE CONTENT HERE CONTENT HERE CONTENT HERE CONTENT HERE CONTENT HERE CONTENT HERE CONTENT HERE CONTENT HERE CONTENT HERE CONTENT HERE CONTENT HERE CONTENT HERE CONTENT HERE CONTENT HERE CONTENT HERE CONTENT HERE CONTENT HERE CONTENT HERE CONTENT HERE CONTENT HERE CONTENT HERE CONTENT HERE CONTENT HERE CONTENT HERE CONTENT HERE CONTENT HERE CONTENT HERE CONTENT HERE CONTENT HERE CONTENT HERE CONTENT HERE CONTENT HERE CONTENT HERE CONTENT HERE CONTENT HERE CONTENT HERE CONTENT HERE CONTENT HERE CONTENT HERE CONTENT HERE CONTENT HERE CONTENT HERE CONTENT HERE CONTENT HERE CONTENT HERE CONTENT HERE CONTENT HERE CONTENT HERE CONTENT HERE CONTENT HERE CONTENT HERE CONTENT HERE CONTENT HERE CONTENT HERE CONTENT HERE CONTENT HERE CONTENT HERE CONTENT HERE CONTENT HERE CONTENT HERE CONTENT HERE CONTENT HERE CONTENT HERE CONTENT HERE CONTENT HERE CONTENT HERE CONTENT HERE CONTENT HERE CONTENT HERE CONTENT HERE CONTENT HERE CONTENT HERE CONTENT HERE CONTENT HERE CONTENT HERE CONTENT HERE CONTENT HERE CONTENT HERE CONTENT HERE CONTENT HERE CONTENT HERE CONTENT HERE CONTENT HERE CONTENT HERE CONTENT HERE CONTENT HERE CONTENT HERE CONTENT HERE CONTENT HERE
    </div>
     
     
    		</div>
     
     
    </body>
    </html>

  2. #2
    SitePoint Enthusiast semicolon's Avatar
    Join Date
    Mar 2010
    Posts
    86
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Solved. Just needed to add the following to BANANA.

    Code HTML4Strict:
    margin-left: 30px; margin-bottom: 30px;


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •