#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2012
    Posts
    54
    Rep Power
    2

    Simple CSS help with positioning


    Hi, trying to do a simple layout. 4 block of colors one below another. Problem is there is no gap between them. I tried to use position: relative and gain the gap via top:10px. But it only helps with the first box1 and the rest still ends up without any gap. New at CSS. Any guidance is appreciated on how I can get the gap between each block of color or maybe a better way to do it. Thank you. The codes I came up with are below.

    Code:
    <!DOCTYPE html> 
    <html> 
    <head> 
    <title>Just a Title</title> 
    <style type="text/css"> 
    div.box1 { 
    width: 800px;
    height: 150px; 
    margin: left; 
    background: red; 
    } 
    div.box2 { 
    width: 800px; 
    height: 150px; 
    margin: left; 
    background: green; 
    } 
    div.box3 
    { 
    width: 800px; 
    height: 150px; 
    margin: left; 
    background: blue; 
    } 
    div.box4 
    { 
    width: 800px; 
    height: 150px; 
    margin: left; 
    background: yellow; 
    } 
    </style> 
    </head> 
    <body> 
    <div class="box1"> </div> 
    <div class="box2"> </div> 
    <div class="box3"> </div> 
    <div class="box4"> </div> 
    </body> 
    </html>
    Think found a solution. Added a position: relative & bottom: 60px/45px/30px/15px respectively from the bottom box(4) to the top box(1). Seems to work. Sorry seems thoughts only started buzzing after posting this.. Do advice if there is a better way though. Tnks.
    Last edited by keshk; November 21st, 2012 at 11:11 AM. Reason: Think found a solution.
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Dec 2003
    Posts
    703
    Rep Power
    441
    What you want to do here is use margins. (By the way, margin: left isn't valid code and won't actually do anything.)

    An easy fix to add 10px of space between your boxes would be:

    Code:
    .box1, .box2, .box3, .box4 {margin-top: 10px}
  4. #3
  5. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2012
    Posts
    119
    Rep Power
    32
    Just as an aside, as you are repeating your code several times, change it to
    Code:
    <style type="text/css"> 
    .box1, .box2, .box3, .box4 { 
    width: 800px;
    height: 150px; 
    margin-left: /*value here if you do need this*/;
    margin-top: 10px;
    } 
    .box1 {  
    background: red; 
    }
    .box2 {  
    background: green; 
    } 
    .box3 { 
    background: blue; 
    } 
    .box4 { 
    background: yellow; 
    } 
    </style>
  6. #4
  7. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2012
    Location
    London
    Posts
    21
    Rep Power
    0
    Exactly.

IMN logo majestic logo threadwatch logo seochat tools logo