Thread: Spacing DIVS

    #1
  1. Confused badger
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Mar 2009
    Location
    West Yorkshire
    Posts
    1,184
    Rep Power
    492

    Spacing DIVS


    Hello all
    I don't normally do much front-end work but I'm trying to make a little menu for an application I've written in PHP.

    If you have a look at the attached PNG you will see the menu pods which are looking OK but they're clumped together, I'd like to add a small amount of space, say 20px or so around the pods but no matter what I try, I can't seem to achieve this

    I've asked google about DIV positioning with CSS and tried all sorts but I just can't seem to get it right.

    My CSS file and PHP code are below (well, the relevents bits anyway).

    PHP Code:
        echo "<div id='menuitem'>";
        echo 
    "<a href='?action=1'>Sync with ADR or update configuration</a><br />";
        echo 
    "</div> ";

        echo 
    "<div id='menuitem'>";
        echo 
    "<a href='reg.php'>Add a new user</a><br />";
        echo 
    "</div> ";

        echo 
    "<div id='menuitem'>";
        echo 
    "<a href='?action=2'>VAT rate admin</a><br />";
        echo 
    "</div> ";
        echo 
    "<div id='newline'></div>";

        echo 
    "<div id='menuitem'>";
        echo 
    "<a href='?action=76'>Produce a bill</a><br />";
        echo 
    "</div> ";

        echo 
    "<div id='menuitem'>";
        echo 
    "<a href='?action=343'>Customer maintenance</a><br />";
        echo 
    "</div> ";

        echo 
    "<div id='menuitem'>";
        echo 
    "<a href='?action=187'>Create a new ad-hoc bill</a><br />";
        echo 
    "</div> ";

        echo 
    "<div id='newline'></div>"
    And my css:-
    Code:
    #menuitem {
    	float:left;
    	position: relative;
    	clear: right;
    	height:100px; 
    	width:100px; 
    	background:#FFFFBB;
    	border:4px solid #666;
    	padding: 15px;
    	-webkit-box-shadow:0 0 15px #000000;
    	-moz-box-shadow:0 0 15px #000000;
    	box-shadow:0 0 15px #000000;
    	border-radius: 15px;
    	border-collapse: separate;
    }
    
    #newline {
    	position: relative;
    	clear: both;
    }
    Thanks for reading and I hope that someone can help a poor badger out!
    Attached Images
    "For if leisure and security were enjoyed by all alike, the great mass of human beings who are normally stupefied by poverty would become literate and would learn to think for themselves; and when once they had done this, they would sooner or later realise that the privileged minority had no function and they would sweep it away"
    - George Orwell, 1984
  2. #2
  3. Confused badger
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Mar 2009
    Location
    West Yorkshire
    Posts
    1,184
    Rep Power
    492
    Fixed it!
    I added

    margin: 10 10;

    into my #menuitem declaration and now it's spaced nicely!
    "For if leisure and security were enjoyed by all alike, the great mass of human beings who are normally stupefied by poverty would become literate and would learn to think for themselves; and when once they had done this, they would sooner or later realise that the privileged minority had no function and they would sweep it away"
    - George Orwell, 1984

IMN logo majestic logo threadwatch logo seochat tools logo