SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Zealot
    Join Date
    Mar 2005
    Posts
    113
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    gap between two divs (driving me crazy)

    Can't find a solution to close the gap between navs div and main_BODY div. I use the float for dts to act as the nav and clear the float after, but it seems caused a gap. The dl and dt is new concept to me and dunno if they are the factor for the gap, any suggestion?

    css:
    Code:
    body {
    	margin: 0;
    	padding: 0;
    	color: #333;
    	background-color: #FFFFFF;
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-size: 12px;
    }
    
    div#container {
    	margin: 0 auto;
    	width: 770px;
    }
    
    /* nav contents */
    div#navWRAPPER {
    	background-color: #E7EBF0;
    	padding: 10px 5px 0 7px;
    	border: 1px #000 solid;
    }
    
    div#navWRAPPER dt {
    	float: left;
    	border-left: 1px #000 solid;
    	border-top: 1px #000 solid;
    }
    
    dt#right_borderNAV {
    	border-right: 1px #000 solid;
    }
    
    head+body #navWRAPPER:after {
    	content: "."; 
    	display: block; 
    	height:0; 
    	clear: both; 
    	visibility: hidden;
    }
    
    * html #navWRAPPER {height: 1%;}
    
    .nav_page a {
    	color: #FFFFFF;
    	font-weight: bold;
    	background-color: #6E9DE1;
    }
    
    .nav_page:hover {
    }
    
    .nav a {
    	color: #000;
    }
    
    #navs a {
    	float: left;
    	text-decoration: none;
    	font-weight: bold;
    	text-transform: uppercase;
    	display: block;
    	padding: 2px 10px 4px 10px;
    }
    
    #navs a:hover {
    	background-color: #6E9DE1;
    	color: #FFFFFF;
    }
    
    * html #navs a {height:1%}
    /* end of nav contents */
    
    /* body contents */
    div#search_exp {
    	border-left: 1px #000 solid;
    	border-bottom: 1px #000 solid;
    	border-right: 1px #000 solid;
    }
    
    div#search_exp h3 {
    	color: #000;
    }
    html:
    Code:
    <div id="container">
    <div id="navWRAPPER">
    		<dl id="navs" class="navs">
    			<dt class="nav_page"><a href="#">test1</a></dt>
    			<dt class="nav"><a href="#">test2</a></dt>
    			<dt class="nav"><a href="#">test3</a></dt>
    			<dt class="nav"><a href="#">test4</a></dt>
    			<dt id="right_borderNAV" class="nav"><a href="#">Sign In</a></dt>
    		</dl>
    	</div>
    	<div id="main_BODY">
    		<div id="search_exp"><h3>test test test test test test</h3><p>blah blah blah blah</p>
    		<p>blah blah blah blah blah</p>
    		</div>
    		</div>
    		</div>
    Thanks!

    Jace

  2. #2
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    set default margins and paddings to 0, then adjust

    *{margin:0;padding:0;}
    h3{padding:10em 1em 1em 1em;}


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
  •