...

View Full Version : How to - Vertical spacing between two divs?



andre1990
10-28-2011, 05:51 PM
Just want to seperate my header from my nav bar, easy way?


#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;


}

teedoff
10-28-2011, 06:10 PM
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.

andre1990
10-28-2011, 06:18 PM
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.

teedoff
10-28-2011, 06:32 PM
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.

andre1990
10-28-2011, 08:05 PM
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)


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%;
}

andre1990
10-28-2011, 11:05 PM
Answered my own issue. No worries thanks.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum