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 6 of 6
  1. #1
    New Coder
    Join Date
    Oct 2011
    Posts
    17
    Thanks
    0
    Thanked 0 Times in 0 Posts

    How to - Vertical spacing between two divs?

    Just want to seperate my header from my nav bar, easy way?

    Code:
    #main{
    
    margin-top:10px;
    margin-left:auto;
    margin-right:auto;
    width:80%;
    height:90%;
    border:1px solid blue;
    -moz-border-radius:8px;
    border-radius:8px;
    
    }
    
    #main .header{
    
    width:100%;
    height:135px;
    border-bottom:1px solid black;
    background:white;
    -moz-border-radius-topleft:8px;
    border-top-left-radius:8px;
    -moz-border-radius-topright:8px;
    border-top-right-radius:8px;
    padding
    
    }
    
    
    #main .navigation{
    float:10px;
    height:35px;
    width:100%;
    border-bottom:1px solid #000;
    background-image: url('images/navbar_bg.png');
    background-repeat:x;
    
    
    }

  • #2
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    umm did you try margin-bottom on your header div?

    Of course that assumes you didn't nest your nav div inside your header div.
    Teed

  • #3
    New Coder
    Join Date
    Oct 2011
    Posts
    17
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks, that worked. Whilst ive got someone here who knows what they are talking about, could you just have a look at the site im working on:

    www.vfrflight.co.uk

    And tell me what the best way to keep that white block on the left? Like aligned with the left blue border.

  • #4
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    You're using positions for everything. DONT.

    Look into floats.

    Specifically you can remove position: relative and any other positioning rules like top, bottom, left...whatever, from leftside.

    Then add:

    float:left; to that div. Give it a width as well while you're at it.

    Then you'll need to clear your floats, so add clear: both; to your footer div.
    Teed

  • #5
    New Coder
    Join Date
    Oct 2011
    Posts
    17
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for the advice, taken!

    If i wanted two extra blocks like so: http://i.imgur.com/4mDfD.png

    Would that be a relative or...?

    (One being the footer)

    Code:
    body
    {
    padding:0;
    font-family:arial,sans-serif;
    background:white url('images/background.jpg') repeat-x 0 0 fixed;
    font-size:13px;
    }
    
    #main{
    
    margin-top:10px;
    margin-left:auto;
    margin-right:auto;
    width:65%;
    height:90%;
    
    }
    
    #main .header{
    
    width:100%;
    height:135px;
    border-bottom:1px solid black;
    background:white;
    border:2px solid blue;
    -moz-border-radius:8px;
    border-radius:8px;
    margin-bottom:10px;
    
    }
    
    
    #main .navigation{
    float:10px;
    height:35px;
    width:100%;
    border-bottom:1px solid #000;
    background-image: url('images/navbar_bg.png');
    background-repeat:x;
    margin-bottom:10px;
    
    }
    
    #main .leftside{
    
    border:2px solid blue;
    height:80%;
    width:300px;
    background:white;
    float:left
    
    }
    
    #main .content {
    
    border:2px solid blue;
    height:80%;
    width:300px;
    background:white;
    
    
    }
    
    #main .footer{
    
    position:relative;
    bottom:0;
    width:100%;
    }

  • #6
    New Coder
    Join Date
    Oct 2011
    Posts
    17
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Answered my own issue. No worries thanks.


  •  

    Posting Permissions

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