SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Sep 2011
    Posts
    45
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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. #2
    Just Blow It bronze trophy
    DaveMaxwell's Avatar
    Join Date
    Nov 1999
    Location
    Mechanicsburg, PA
    Posts
    7,251
    Mentioned
    113 Post(s)
    Tagged
    1 Thread(s)
    Set a margin-bottom on the header class for the space you want.
    Dave Maxwell - Manage Your Site Team Leader
    My favorite YouTube Video! | Star Wars, Dr Suess Style

  3. #3
    SitePoint Enthusiast
    Join Date
    Sep 2011
    Posts
    45
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, that worked a treat! Could i ask the following too? :

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

  4. #4
    SitePoint Enthusiast
    Join Date
    Sep 2011
    Posts
    45
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Answered my own question there! Thanks. Closed.

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,276
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Don't set a height on #main if it is holding fluid content because that means it can never grow and content that exceeds that height will spill out. You should let content dictate the height so that the layout can grow as required.

    If you wnat equal columns then it gets tricky and you have to use either faux columns, display:table (ie8+), negative margin trickery, or my favourite of absolute overlays t provide column colours.

    Here's a rough example:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>CSS Equal Columns</title>
    <style type="text/css">
    * {
    	margin:0;
    	padding:0
    }/* for demo only - use a prper reset instead */
    p { margin:0 0 1em 0;padding:5px; }
    body {
    	text-align:center;
    	background:#CC6699;
    	padding:25px 0;
    }
    #wrapper {
    	width:65%;
    	margin:0 auto;
    	text-align:left;
    	background:#fff;
    	border:5px solid #000;
    	padding:10px;
    }
    #header, #footer {
    	background:#fff;
    	padding:10px;
    	zoom:1.0;/* haslayout fix ie*/
    	border:1px solid #000;
    	clear:both;
    }
    #header h1, #footer p {
    	text-align:center;
    	margin:0 0 1em
    }
    #inner {
    	position:relative;
    	width:100%;
    	clear:both;
    	z-index:2;
    	margin:10px 0;
    	overflow:hidden;
    }
    #sidebar {
    	width:300px;
    	z-index:3;
    	position:relative;
    	float:left;
    }
    #main {
    	position:relative;
    	z-index:2;
    	margin:0 0 0 326px;
    	zoom:1.0;/*ie haslayout fix */
    }
    #inner2 {
    	width:100%;
    	float:left;
    }
    /* use absolute overlays for full column colours and borders*/
    .col {
    	width:298px;
    	position:absolute;
    	z-index:0;
    	left:0;
    	top:0;
    	bottom:0;
    	border:1px solid #000;
    	background:red;
    }
    .two {
    	background:#CC3399;
    	left:320px;
    	right:0;
    	width:auto;
    }
    </style>
    <!--[if lte IE 6]>
    <style type="text/css">
    #main{zoom:1.0}
    .col {
    	top:auto;
    	right:auto;
    	height:1000em;
    }
    #sidebar, #main { border-top:1px solid #000 }
    .two span{zoom:1.0;display:block;}
    </style>
    <![endif]-->
    
    </head>
    
    <body>
    <div id="wrapper">
    		<div id="header">
    				<h1>Equal columns -  - Read the <a href="http://www.search-this.com/2007/02/26/how-to-make-equal-columns-in-css/">article</a></h1>
    		</div>
    		<div id="inner">
    				<div id="sidebar">
    						<p>This is some text : This is some text : This is some text : This is some text :This is some text : This is some text :This is some text : This is some text :This is some text : This is some text :This is some text : This is some text :This is some text : This is some text :This is some text : This is some text :This is some text : This is some
    								text </p>
    				</div>
    				<div id="main">
    						<div id="inner2">
    								<h2>Equal Columns</h2>
    								<p>This is some text : This is some text : This is some text : This is some text :This is some text : This is some text :This is some text : This is some text :This is some text : This is some text :This is some text : This is some text :This is some text : This is some text :This is some text : This is some text :This is some text : This is some
    										text </p>
    								<p>This is some text : This is some text : This is some text : This is some text :This is some text : This is some text :This is some text : This is some text :This is some text : This is some text :This is some text : This is some text :This is some text : This is some text :This is some text : This is some text :This is some text : This is some
    										text </p>
    								<p>This is some text : This is some text : This is some text : This is some text :This is some text : This is some text :This is some text : This is some text :This is some text : This is some text :This is some text : This is some text :This is some text : This is some text :This is some text : This is some text :This is some text : This is some
    										text </p>
    						</div>
    				</div>
    				<div class="col one"></div>
    				<!-- col one and two supply full length column colours and borders and hold not content -->
    				<div class="col two"><span></span></div>
    		</div>
    		<div id="footer">
    				<p>Footer</p>
    		</div>
    </div>
    </body>
    </html>


Bookmarks

Posting Permissions

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