Combining Absolute Width Navigation With Relative Width Content

[alexjewell]

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:

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:

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

[monicasaha]

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;

}

[alexjewell]

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.

[alexjewell]

No one has any ideas? :/