Results 1 to 4 of 4

Thread: Combining Absolute Width Navigation With Relative Width Content

  1. #1
    Join Date
    Mar 2006
    Location
    Cleveland, Ohio
    Posts
    574
    Thanks
    6
    Thanked 5 Times in 5 Posts

    Default Combining Absolute Width Navigation With Relative Width Content

    I have essentially a two-sided layout, with the 260px width navigation on the left side and the 100% width content on the right side. The problem lies in the fact that even with the floated navigation in a 100% #wrap, the #navtop2 (which is another navigation bar found at the top of the #cont side) either ends up hiding behind the #nav, still stretching the full width of the page rather than lining up beside it, or taking on the width of the entire page while lining up beside it. In other words, it will do everything except take on whatever relative width is left after the #nav takes up 260px of it.

    The code:

    CSS:
    Code:
    body{
    margin: 0px;
    padding: 0px;
    background: white;}
    
    #wrap, #nav, #cont{
    height: 100%;}
    
    #wrap{
    width: 100%;
    background: white url(imgs/navbgside.gif) repeat-y left;}
    
    #nav{
    float: left;
    width: 260px;
    background: transparent url(imgs/navbot.gif) no-repeat bottom center;}
    	
    	#nav a img{
    	display: block;
    	margin: 0px;
    	border: 0px;}
    	
    	#jbe{
    	margin-bottom: 16px !important;}
    	
    #cont{
    width: 100%;
    background: transparent url(imgs/footbg.gif) repeat-x bottom;}
    
    #navtop{
    background: transparent url(imgs/topcorn.jpg) no-repeat top left;}
    
    	#navtop, #navtop2{
    	width: 100%;
    	height: 140px;}
    
    	#navtop2{
    	background: transparent url(imgs/nts.gif) no-repeat bottom left;}
    HTML:
    HTML Code:
    <div>
    
    <div id="wrap">
    	<div id="cont">
    		<div id="nav">
    			<a href="#"><img src="imgs/jbe.jpg" alt="jamie belkin management and production" id="jbe" /></a>
    			<a href="#">
    				<img src="imgs/corp-events.gif" alt="Corporate Events" />
    			</a>
    			<a href="#">
    				<img src="imgs/meetings.gif" alt="Meetings and Conferences" />
    			</a>
    			<a href="#">
    				<img src="imgs/prof-ed.gif" alt="Continuing Professional Education" />
    			</a>
    			<a href="#">
    				<img src="imgs/team-building.gif" alt="Team Building" />
    			</a>
    			<a href="#">
    				<img src="imgs/bar-mitz.gif" alt="Bat/Bar Mitzvahs and Weddings" />
    			</a>
    			<a href="#">
    				<img src="imgs/social.gif" alt="Social Events" />
    			</a>
    			<a href="#">
    				<img src="imgs/no-profit.gif" alt="Not-for-Profit Events" />
    			</a>
    			<a href="#">
    				<img src="imgs/event-locs.gif" alt="Event Locations" />
    			</a>
    		</div>
    		<div id="navtop">
    			<div id="navtop2"></div>
    		</div>
    	</div>
    </div>
    
    </div>
    Thou com'st in such a questionable shape
    Hamlet, Act 1, Scene 4

  2. #2
    Join Date
    Oct 2008
    Location
    kolkata, india
    Posts
    75
    Thanks
    2
    Thanked 10 Times in 10 Posts

    Default

    u can try this css
    body{
    margin: 0px;
    padding: 0px;
    background: white;}

    #wrap, #nav, #cont{
    height: 100%;}

    #wrap{
    width: 100%;
    background: white url(imgs/navbgside.gif) repeat-y left;}

    #nav{
    float: left;
    width: 260px;
    background: transparent url(imgs/navbot.gif) no-repeat bottom center;}

    #nav a img{
    display: block;
    margin: 0px;
    border: 0px;}

    #jbe{
    margin-bottom: 16px !important;}

    #cont{

    background: transparent url(imgs/footbg.gif) repeat-x bottom;}

    #navtop{
    background: transparent url(imgs/topcorn.jpg) no-repeat top left;
    margin:0 0 0 260px;

    }

    #navtop, #navtop2{

    height: 140px;}

    #navtop2{
    background: transparent url(imgs/nts.gif) no-repeat bottom left;

    }

  3. #3
    Join Date
    Mar 2006
    Location
    Cleveland, Ohio
    Posts
    574
    Thanks
    6
    Thanked 5 Times in 5 Posts

    Default

    I tried adding a 260px margin originally and what happened was the div stayed the width of the entire page, but moved over. In other words, the right-left scrollbar showed up and it became the static size of the entire page even when it only needed to fill up what was left to fill up, to the right of the navigation.
    Thou com'st in such a questionable shape
    Hamlet, Act 1, Scene 4

  4. #4
    Join Date
    Mar 2006
    Location
    Cleveland, Ohio
    Posts
    574
    Thanks
    6
    Thanked 5 Times in 5 Posts

    Default

    No one has any ideas? :/
    Thou com'st in such a questionable shape
    Hamlet, Act 1, Scene 4

Tags for this Thread

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
  •