Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Feb 2013
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Only padding at top and left

    Hello,

    Recently I came across a tiny problem which drives me crazy. I've been looking all over the internet, but once again, it seems like I'm overlooking something...

    I have got a Div on my page, and inside it is text. Therefore I have a certain padding specified. However, this padding only exists on the top and the left side, but not on the right and bottom sides. Even worse: at those two sides, the text actually disappears out of the Div.


    Code:
    <div id="container">
        <div id="bot1">
        bla1 sdnwklodnansd ksdnks (...) dnklas dnklas dnklas dnkla
        </div>
    </div>
    Code:
    #container {
        width:100%;
        height:100%;
        position:relative;
    }
    
    #bot1 {
        width:25%;
        height:100%;
        position:absolute;
        background-color:#AAAAAA;
        top:0%;
        left:0%;
        padding:10px;
    }
    I wonder, why can't I set a right and bottom padding? I tried setting it manually (padding-right and padding-bottom).

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,673
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello JumperJack,
    For your 100% height to work you must declare it from the start.
    Try it like this -
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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">
    html, body {
    	margin: 0;
    	background: #fc6;
    	height: 100%;
    }
    #container {
        width:100%;
        height:100%;
        position:relative;
    }
    
    #bot1 {
        width:25%;
        height:100%;
        position:absolute;
        background-color:#AAAAAA;
        top:0%;
        left:0%;
        padding:10px;
    }
    </style>
    </head>
    <body>
        <div id="container">
            <div id="bot1">
            	bla1 sdnwklodnansd ksdnks (...) dnklas dnklas dnklas dnkla
            </div>
    	</div>
    </body>
    </html>
    Is there any reason that #bot1 is absolutely positioned? It might be better just to let the document flow naturally.


    .
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Tags for this Thread

    Posting Permissions

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