Let a <div> scroll

HTML & CSS
1

Hi,

I want to do two things with the code attached.

1) I would like the background image in #nav to stretch 100% in height as well as be fixed at the top left.

2) I would also like to have a scrollbar on the page so I can scroll down the content in my Content div.


<!DOCTYPE html> 
<html dir="ltr" lang="en-US"> 
<head> 
<meta charset="UTF-8" /> 
<title></title> 
 
<style type="text/css">
/* CSS Document */

/*---------------------------------------------------------------------------------
Yahoo YUI 2 RESET
---------------------------------------------------------------------------------*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
	margin: 0;
	padding: 0;
  text-align:left}
 
table {
	border-collapse: collapse;
	border-spacing: 0; }
 
fieldset,img { border: 0; }
 
address,caption,cite,code,dfn,em,strong,th,var {
	font-style: normal;
	font-weight: normal; }
 
ol,ul { list-style: none; }
 
caption,th { text-align: left; }
 
h1,h2,h3,h4,h5,h6 {
	font-size: 100%;
	font-weight: normal; }
 
q:before,q:after { content: ''; }
 
abbr,acronym { border: 0; }

.clearboth {clear:both}
.smlclearboth {clear:both;height:1px}
.floatRight {float:right}
.floatRight a {margin-left:10px}
.floatLeft {float:left}

/*---------------------------------------------------------------------------------
Rebuild Edit of Yahoo Base
---------------------------------------------------------------------------------*/
h1,h2,h3 {
	/* top &amp; bottom margin based on font size */
	margin:1em 0;
}
h2,h3,h4,h5,h6,strong {
	/*bringing boldness back to headers and the strong element*/
	font-weight:bold;
}
abbr,acronym {
	/*indicating to users that more info is available */
	border-bottom:1px dotted #000;
	cursor:help;
} 
em {
	/*bringing italics back to the em element*/
	font-style:italic;
}
blockquote,ul,ol,dl {
	/*giving blockquotes and lists room to breath*/
	margin:1em;
}
ol,ul,dl {
	/*bringing lists on to the page with breathing room */
	margin-left:2em;
}
ol li {
	/*giving OL's LIs generated numbers*/
	list-style: decimal outside;	
}
ul li {
	/*giving UL's LIs generated disc markers*/
	list-style: disc outside;
}
dl dd {
	/*giving UL's LIs generated numbers*/
	margin-left:1em;
}
th,td {
	/*borders and padding to make the table readable*/
	border:1px solid #000;
	padding:.5em;
}
th {
	/*distinguishing table headers from data cells*/
	font-weight:bold;
	text-align:center;
}
caption {
	/*coordinated marking to match cell's padding*/
	margin-bottom:.5em;
	/*centered so it doesn't blend in to other content*/
	text-align:center;
}
p,fieldset,table {
	/*so things don't run into each other*/
	margin-bottom:1em;
}
#container {float:left;width:740px;}
#header {background:#999;height:30px;width:100%;}
#nav { float:left; text-align:left;width:180px}
html { height: 100%; color:#fff; font-family:georgia,garamond,serif; }
body { min-height: 100%; height: 100%; color:#fff; font-family:georgia,garamond,serif;}
#container, #nav, #content {min-height: 100%; height: 100%;}
</style> 
</head> 
 
<body style="background: black"> 
  	
  	<div id="container" style="color:#fff;margin:0;padding:0;width:980px"> 
  		
  		<div id="nav" style="position:fixed;width:700px;background:url('http://leandrovieira.com/projects/jquery/lightbox/photos/image1.jpg') 0 0 no-repeat"> 
 
  		  <div id="content" style="color:#fff;margin:0;padding-left:10px;z-index:1000;margin-left:315px;width:375px;background:green"> 
 
          <p>stuff goes in here</p>
          <p>stuff goes in here</p>
          <p>stuff goes in here</p>
          <p>stuff goes in here</p>
          <p>stuff goes in here</p>
          <p>stuff goes in here</p>
          <p>stuff goes in here</p>
          <p>stuff goes in here</p>
          <p>stuff goes in here</p>
          <p>stuff goes in here</p>
          <p>stuff goes in here</p>
          <p>stuff goes in here</p>
          <p>stuff goes in here</p>
          <p>stuff goes in here</p>
          <p>stuff goes in here</p>
          <p>stuff goes in here</p>
          <p>stuff goes in here</p>
          <p>stuff goes in here</p>
          <p>stuff goes in here</p>
          <p>stuff goes in here</p>
          <p>stuff goes in here</p>
          <p>stuff goes in here</p>
          <p>stuff goes in here</p>
          <p>stuff goes in here2</p>
          <p>stuff goes in here2</p>
          <p>stuff goes in here2</p>
          <p>stuff goes in here2</p>
          <p>stuff goes in here2</p>
          <p>stuff goes in here2</p>
          <p>stuff goes in here2</p>
          <p>stuff goes in here2</p>
          <p>stuff goes in here2</p>
          <p>stuff goes in here2</p>
          <p>stuff goes in here2</p>
 
  		  </div>
  		  
      </div> 
      
      </div> 
      
    </div> 
 
</body> 
</html>

Many thanks for any help with this.

2

i don’t think you can stretch a background image, only repeat it x or y.
as for the content box to scroll, give it a fixed width and height and add an overflow property to it…

width:375px; height:300px; overflow:scroll;

3

Hi rainner,

Thanks for the quick response.

Is there a way I can have the scrollbar on the Body of the page, instead of actually on the Content divider? Sorry if my initial query was a bit unclear.

4

Got it working as I’d like.

I basically closed the <div id=“nav”></div> part and placed position:fixed on some of the elements.

Many thanks. Your input helped put me in the right direction :smiley:

5

yeah there’s a lot of css stuff in there that doesn’t need to be there and is interfering with other stuff.

also you had your content div inside your nav div, that wasn’t helping either, so i cleaned it up a little, try this…


<!DOCTYPE html> 
<html dir="ltr" lang="en-US"> 
<head> 
<meta charset="UTF-8" /> 
<title></title> 
 
<style type="text/css">
/* CSS Document */

/*---------------------------------------------------------------------------------
Yahoo YUI 2 RESET
---------------------------------------------------------------------------------*/
html, body { display:block; height:100%; color:#fff; font-family:georgia,garamond,serif; }

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
	margin: 0;
	padding: 0;
  text-align:left}
 
table {
	border-collapse: collapse;
	border-spacing: 0; }
 
fieldset,img { border: 0; }
 
address,caption,cite,code,dfn,em,strong,th,var {
	font-style: normal;
	font-weight: normal; }
 
ol,ul { list-style: none; }
 
caption,th { text-align: left; }
 
h1,h2,h3,h4,h5,h6 {
	font-size: 100%;
	font-weight: normal; }
 
q:before,q:after { content: ''; }
 
abbr,acronym { border: 0; }

.clearboth {clear:both}
.smlclearboth {clear:both;height:1px}
.floatRight {float:right}
.floatRight a {margin-left:10px}
.floatLeft {float:left}

/*---------------------------------------------------------------------------------
Rebuild Edit of Yahoo Base
---------------------------------------------------------------------------------*/
h1,h2,h3 {
	/* top &amp; bottom margin based on font size */
	margin:1em 0;
}
h2,h3,h4,h5,h6,strong {
	/*bringing boldness back to headers and the strong element*/
	font-weight:bold;
}
abbr,acronym {
	/*indicating to users that more info is available */
	border-bottom:1px dotted #000;
	cursor:help;
} 
em {
	/*bringing italics back to the em element*/
	font-style:italic;
}
blockquote,ul,ol,dl {
	/*giving blockquotes and lists room to breath*/
	margin:1em;
}
ol,ul,dl {
	/*bringing lists on to the page with breathing room */
	margin-left:2em;
}
ol li {
	/*giving OL's LIs generated numbers*/
	list-style: decimal outside;	
}
ul li {
	/*giving UL's LIs generated disc markers*/
	list-style: disc outside;
}
dl dd {
	/*giving UL's LIs generated numbers*/
	margin-left:1em;
}
th,td {
	/*borders and padding to make the table readable*/
	border:1px solid #000;
	padding:.5em;
}
th {
	/*distinguishing table headers from data cells*/
	font-weight:bold;
	text-align:center;
}
caption {
	/*coordinated marking to match cell's padding*/
	margin-bottom:.5em;
	/*centered so it doesn't blend in to other content*/
	text-align:center;
}
p,fieldset,table {
	/*so things don't run into each other*/
	margin-bottom:1em;
}
#container {float:left;width:740px;}
#header {background:#999;height:30px;width:100%;}
#nav { float:left; text-align:left;width:180px}
</style> 
</head> 
 
<body style="background: black"> 
  	
	<div id="container" style="color:#fff;margin:0;padding:0;width:980px; background:url('http://leandrovieira.com/projects/jquery/lightbox/photos/image1.jpg') 0 0 no-repeat"> 
  		
		<div id="nav" style="position:fixed;width:700px;">
        	my nav 
		</div> 
 
		<div id="content" style="color:#fff;margin:0;padding-left:10px;z-index:1000;margin-left:315px;width:375px;background:green"> 
 
			<p>stuff goes in here</p> 
            <p>stuff goes in here</p> 
            <p>stuff goes in here</p> 
            <p>stuff goes in here</p> 
            <p>stuff goes in here</p> 
            <p>stuff goes in here</p> 
            <p>stuff goes in here</p> 
            <p>stuff goes in here</p> 
            <p>stuff goes in here</p> 
            <p>stuff goes in here</p> 
            <p>stuff goes in here</p> 
            <p>stuff goes in here</p> 
            <p>stuff goes in here</p> 
            <p>stuff goes in here</p> 
            <p>stuff goes in here</p> 
            <p>stuff goes in here</p> 
            <p>stuff goes in here</p> 
            <p>stuff goes in here</p> 
            <p>stuff goes in here</p> 
            <p>stuff goes in here</p> 
            <p>stuff goes in here</p> 
            <p>stuff goes in here</p> 
            <p>stuff goes in here</p> 
            <p>stuff goes in here</p> 
            <p>stuff goes in here</p> 
            <p>stuff goes in here</p> 
            <p>stuff goes in here</p> 
            <p>stuff goes in here</p> 
            <p>stuff goes in here</p> 
            <p>stuff goes in here</p> 
            <p>stuff goes in here</p> 
            <p>stuff goes in here</p> 
            <p>stuff goes in here</p> 
            <p>stuff goes in here</p> 
            <p>stuff goes in here</p> 
            <p>stuff goes in here</p> 
            <p>stuff goes in here</p> 
            <p>stuff goes in here</p> 
            <p>stuff goes in here</p> 
            <p>stuff goes in here</p> 
            <p>stuff goes in here</p> 
            <p>stuff goes in here</p> 
            <p>stuff goes in here</p> 
            <p>stuff goes in here</p> 
            <p>stuff goes in here</p> 
            <p>stuff goes in here</p> 
            <p>stuff goes in here</p> 
            <p>stuff goes in here</p> 
            <p>stuff goes in here</p> 
            <p>stuff goes in here</p> 
            <p>stuff goes in here</p> 
            <p>stuff goes in here</p> 
            <p>stuff goes in here</p> 
            <p>stuff goes in here</p> 
            <p>stuff goes in here</p> 
            <p>stuff goes in here</p> 
            <p>stuff goes in here</p> 
            <p>stuff goes in here</p> 
            <p>stuff goes in here</p> 
            <p>stuff goes in here</p> 
                     
		</div>
  		  
	</div> 
 
</body> 
</html>