Sidebar extends beyond the background

Discussion in 'HTML & Website Design' started by beginner_83, Oct 2, 2009.

0
  1. #1
    Hi Everyone

    I'm pretty new to css and am having a problem that I can't fix. Unfortunately, I don't have my website online yet so I can't provide a link but I have attached a screenshot.

    My website is a gallery of my photos. The page that I'm having a problem with contents a sidebar that is located on the left side of the page. The sidebar contains thumbnails of the larger images. The other part of the page contains the larger image. When the larger image is displayed the bottom of the background stops beneath the image, however, the sidebar continues on.

    Does anyone know how I can extend the white background to beneath the end of the sidebar??

    Thanks in advance.

    This is my html code...

    
<body>
<div id="wrapper">
 
	<div id="americaHeader">
		<div id="logo">
 
			<h1><a href="america.php">My American Adventures</a></h1>
		</div>
	</div>
	<!-- end #header -->
	<div id="menu">
		<ul>
			<li><a href="index.php">Home</a></li>
			<li><a href=america1.php?page=photo&place=>Photos</a></li>
 
			<li><a href="#">Sights</a></li>
			<li><a href="#">Dos & Donts</a></li>
		</ul>
	</div>
 
 
	<div id="content1">
 
	<div id=sidebar><a href="/Website/americaphotos.php?page=photo&img=0&ID=2"><img src="thumbs//graceland1.jpg" alt="graceland1.jpg" />
   </a>
 
<a href="/Website/americaphotos.php?page=photo&img=1&ID=2"><img src="thumbs//graceland2.jpg" alt="graceland2.jpg" />
   </a>
<a href="/Website/americaphotos.php?page=photo&img=2&ID=2"><img src="thumbs//graceland4.jpg" alt="graceland4.jpg" />
   </a>
<a href="/Website/americaphotos.php?page=photo&img=3&ID=2"><img src="thumbs//graceland5.jpg" alt="graceland5.jpg" />
   </a>
<a href="/Website/americaphotos.php?page=photo&img=4&ID=2"><img src="thumbs//graceland6.jpg" alt="graceland6.jpg" />
   </a>
<a href="/Website/americaphotos.php?page=photo&img=5&ID=2"><img src="thumbs//graceland7.jpg" alt="graceland7.jpg" />
   </a>
<a href="/Website/americaphotos.php?page=photo&img=6&ID=2"><img src="thumbs//graceland8.jpg" alt="graceland8.jpg" />
   </a>
 
<a href="/Website/americaphotos.php?page=photo&img=7&ID=2"><img src="thumbs//graceland9.jpg" alt="graceland9.jpg" />
   </a>
<a href="/Website/americaphotos.php?page=photo&img=8&ID=2"><img src="thumbs//graceland10.jpg" alt="graceland10.jpg" />
   </a>
<a href="/Website/americaphotos.php?page=photo&img=9&ID=2"><img src="thumbs//graceland11.jpg" alt="graceland11.jpg" />
   </a>
<a href="/Website/americaphotos.php?page=photo&img=10&ID=2"><img src="thumbs//graceland12.jpg" alt="graceland12.jpg" />
   </a>
<a href="/Website/americaphotos.php?page=photo&img=11&ID=2"><img src="thumbs//graceland13.jpg" alt="graceland13.jpg" />
   </a>
<a href="/Website/americaphotos.php?page=photo&img=12&ID=2"><img src="thumbs//graceland14.jpg" alt="graceland14.jpg" />
   </a>
 
<a href="/Website/americaphotos.php?page=photo&img=13&ID=2"><img src="thumbs//graceland15.jpg" alt="graceland15.jpg" />
   </a>
<a href="/Website/americaphotos.php?page=photo&img=14&ID=2"><img src="thumbs//graceland16.jpg" alt="graceland16.jpg" />
   </a>
<a href="/Website/americaphotos.php?page=photo&img=15&ID=2"><img src="thumbs//graceland17.jpg" alt="graceland17.jpg" />
   </a>
<a href="/Website/americaphotos.php?page=photo&img=16&ID=2"><img src="thumbs//graceland18.jpg" alt="graceland18.jpg" />
   </a>
<a href="/Website/americaphotos.php?page=photo&img=17&ID=2"><img src="thumbs//graceland19.jpg" alt="graceland19.jpg" />
   </a>
<a href="/Website/americaphotos.php?page=photo&img=18&ID=2"><img src="thumbs//graceland20.jpg" alt="graceland20.jpg" />
   </a>
 
</div><div id='photoContent'>Previous<img src="images//graceland1.jpg"><a href="/Website/americaphotos.php?page=photo&img=1&ID=2">&ensp&gt;</a></br></br>
 
    </div>
 
</div>
</body>
</html>
    Code (markup):
    This is my css..

    
body {
	margin: 20px;
	background: #000000;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 13px;
	color: #787878;
}
 
h1, h2, h3 {
	margin: 0;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-weight: normal;
	color: #000000;
}
 
h1 {
	font-size: 2em;
}
 
h2 {
	font-size: 1.6em;
}
 
h3 {
	font-size: 1.6em;
}
 
p, ul, ol {
	margin-top: 0;
	line-height: 180%;
}
 
ul, ol {
}
 
a {
	text-decoration: none;
	border-bottom: 1px dotted #999999;
	color: #0A0A0A;
}
 
a:hover {
	background: none;
}
 
#wrapper {
	width: 910px;
	margin: 0 auto;
	padding: 20px;
	background: #FFFFFF;
}
 
/* Header */
 
#header {
	width: 910px;
	height: 200px;
	margin: 0 auto;
	background: #FFDA2A url(images/homeLogo.jpg) no-repeat left top;
}
 
#americaHeader
{
	width: 910px;
	height: 200px;
	margin: 0 auto;
	background: #FFDA2A url(images/usaLogo.jpg) no-repeat left top;
}
 
 
/* Logo */
 
#logo {
	float: left;
	width: 640px;
	color: #000000;
}
 
#logo h1, #logo p {
}
 
#logo h1 {
	float: left;
	padding: 70px 0 0 20px;
	letter-spacing: -1px;
	text-transform: uppercase;
	font-size: 2.6em;
	font: Courier;	
 
}
 
 
 
#logo a {
	border: none;
	background: none;
	text-decoration: none;
	color: #FFFFFF;
 
}
 
 
/* Menu */
 
#menu {
	width: 910px;
	height: 50px;
	margin: 0 auto;
	padding: 0;
	border-top: 1px #FFFFFF solid;
	background: #565F68;
}
 
#menu ul {
	margin: 0;
	padding: 0;
	list-style: none;
	line-height: normal;
}
 
#menu li {
	float: left;
}
 
#menu a {
	display: block;
	padding: 17px 10px 10px 20px;
	text-transform: uppercase;
	text-decoration: none;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: bold;
	color: #FFFFFF;
	border: none;
}
 
#menu a:hover, #menu .current_page_item a {
	color: #FFFFFF;
}
 
#menu a:hover {
	text-decoration: underline;
}
 
 
 
/* Content */
 
#content1
{
	width: 600px;
	padding: 40px 20px 0 10px;
}
 
/* Photos */
 
#photoContent
{
	position:relative;
	top:0px;
	width: 600px;
	margin-left:300px;
 
}
 
#photoContent img
{
	vertical-align:top;
}
 
 
/* Sidebar */
 
#sidebar {
	position:relative;
	top:0px;
	float: left;
	width: 200px;
	padding: 9px 0 0 5px;
	background: #D1D8D1;
 
}
 
#sidebar img
{
	padding: 5px 5px 5px 5px;
	border:0px;
}
    Code (markup):
     

    Attached Files:

    beginner_83, Oct 2, 2009 IP
  2. Chaps

    Chaps Peon

    Messages:
    24
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #2
    try this:

    overflow: auto;

    in your WRAPPER ID.
     
    Chaps, Oct 2, 2009 IP
  3. beginner_83

    beginner_83 Peon

    Messages:
    2
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Thanks...that worked a treat but now there is a scroll bar across the bottom. I've been playing with the width values but I can't get rid of it. Do you know how???
     
    beginner_83, Oct 2, 2009 IP
  4. Design_Guy

    Design_Guy Peon

    Messages:
    35
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    If you can get this website online somewhere, it will make it a lot easier for us to help you.
     
    Design_Guy, Oct 2, 2009 IP
  5. Chaps

    Chaps Peon

    Messages:
    24
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Yeah online would help.


    Chances are if you are getting a scroll bar, your content is too wide for the width you have set for your wrapper. So you can either make the wrapper wider (even just for testing purposes, temporarily)...or make the DIV's within it smaller.

    But yes having it online would help us help you.
     
    Chaps, Oct 2, 2009 IP
  6. mdvaden

    mdvaden Active Member

    Messages:
    465
    Likes Received:
    9
    Best Answers:
    0
    Trophy Points:
    58
    #6
    One thing I like about online, is that - say Dreamweaver - does not always display just like on the real internet with Firefox or IE.

    My menus for example, are <div> based. In Firefox, there is some white above my menu. In IE, the menu is tight against the header image.
     
    mdvaden, Oct 3, 2009 IP
  7. calviin

    calviin Peon

    Messages:
    17
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #7
    #content1
    {
    width: 600px;
    padding: 40px 20px 0 10px;
    }
    Remove width: 600px;

    #photoContent
    {
    position:relative;
    top:0px;
    width: 600px;
    margin-left:300px;

    }
    Remove margin-left: 300px;
    Add float: right;


    Simplest solution to fix float bug:

    Add <br class"clear" /> before you close #content1, or right after #photoContent
    add to CSS
    .clear { clear: both }
     
    calviin, Oct 6, 2009 IP