2 replies [Last post]
rweilert
rweilert's picture
Offline
newbie
Kansas City
Last seen: 11 years 7 weeks ago
Kansas City
Timezone: GMT-5
Joined: 2010-04-20
Posts: 4
Points: 6

I've tried the clear: both; method for the footer of my page but it still won't expand to fit this div with the image gallery.

It's a very simple website, I just don't know what I'm doing.

http://www.polyform-design.com/stationary.html

HTML:

<body class="main">
 
<div id="container">
 
  <div id="home">
  <a href="http://www.polyform-design.com/index.html" target="_self"><img src="http://www.polyform-design.com/images/header.jpg" width="900" height="230" border="0" /></a>
  </div>
 
  <div id="content">
    <div id="images">
    <ul id="gallery">
<li><img src="http://www.polyform-design.com/images/stationary1.jpg" alt="Stationary 1" width="650" height="488"></li>
<li><img src="http://www.polyform-design.com/images/stationary2.jpg" alt="Statioary 2" width="650" height="563"></li>
<li><img src="http://www.polyform-design.com/images/stationary4.jpg" alt="Stationary 4" width="650" height="522"></li>
<li><img src="http://www.polyform-design.com/images/stationary3.jpg" alt="Stationary 3" width="650" height="546"></li>
</ul>
<br style="clear:both;font-size:0;line-height:0;height:0;" />
    </div>
      <div id="description">Content for  id "description" Goes Here</div>
      <br style="clear:both;font-size:0;line-height:0;height:0;" />
  </div>
<div id="menu">
  	<ul id="dhtmlgoodies_listMenu">
    <br />
	<li><a href="#">: IDENTITY</a>
				<ul>
					<li><a href="http://www.polyform-design.com/logo.html">Logo</a></li>
					<li><a href="http://www.polyform-design.com/stationary.html">Stationary</a></li>
		</ul>		
	  </li>   
          <br />
		<li><a href="#">: PRINT</a>
				<ul>
					<li><a href="http://www.polyform-design.com/brochure.html">Brochure</a></li>
					<li><a href="http://www.polyform-design.com/magazine.html">Magazine</a></li>
					<li><a href="http://www.polyform-design.com/musicpackaging.html">Music Packaging</a></li>
					<li><a href="http://www.polyform-design.com/selfmailer.html">Self-Mailer</a></li>
 
				</ul>		
	  </li>   
          <br />
		<li><a href="#">: ILLUSTRATION</a>
				<ul>
					<li><a href="http://www.polyform-design.com/advertising.html">Advertising</a></li>
					<li><a href="http://www.polyform-design.com/book.html">Book</a></li>
				</ul>
	  </li>
          <br />
		<li><a href="#">: DIGITAL</a>
				<ul>
					<li><a href="http://www.polyform-design.com/interface.html">Interface</a></li>
					<li><a href="http://www.polyform-design.com/web.html">Web</a></li>
				</ul>			
	  </li>   
          <br />       
			<li><a href="#">: ENVIRONMENT</a>
				<ul>
					<li><a href="http://www.polyform-design.com/museum.html">Museum</a></li>
					<li><a href="http://www.polyform-design.com/signge.html">Signage</a></li>
				</ul>
			</li>
	</ul>
    <br style="clear:both;font-size:0;line-height:0;height:0;" />
  </div>
 
  <div id="contact">
    <a href="http://www.linkedin.com/in/rhiannaweilert" target="_blank"><img src="http://www.polyform-design.com/images/name.jpg" alt="Rhianna Weilert - LinkedIn" width="192" height="48" border="0" /></a><a href="mailto:[email protected]"><img src="http://www.polyform-design.com/images/email.jpg" alt="Email Address" width="287" height="48" border="0" /></a><img src="http://www.polyform-design.com/images/phone.jpg" alt="Phone Number" width="184" height="48" /><a href="http://www.polyform-design.com/information.html" target="_parent"><img src="http://www.polyform-design.com/images/information.jpg" alt="Information" width="237" height="48" border="0" /></a>
  </div>
 
</div>
 
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-6928500-1");
pageTracker._trackPageview();
} catch(err) {}</script>
 
</body>

CSS:

@charset "UTF-8";
 
a {
  outline: none;
}
 
body {
	background-color: #333;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 0.7em;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	color: #333;
	margin: 0px;
	border-top-width: 0px;
	border-right-width: 0px;
	border-bottom-width: 0px;
	border-left-width: 0px;
	text-decoration: none;
	min-height: 100%;
    height: auto;
	}
 
.main #container {
	width: 900px;
	background: #FFFFFF;
	border: none;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	height: 100%;
}
.main #container #content {
	float: left;
	width: 650px;
	padding: 0px;
	height: 100%;
}
.main #container #content #welcome p {
	font-style: italic;
	font-size: 1.5em;
	padding: 0px;
	margin-top: 10px;
}
.main #container #content #images {
	margin: 0px;
	padding: 0px;
	float: left;
	width: 650px;
	height: 100%;
	position: relative;
}
 
#jgal {
	list-style: none;
	width: 650px;
	height: 100%;
}
#jgal li {
	opacity: .5;
	float: left;
	display: block;
	width: 60px;
	height: 60px;
	background-position: 50% 50%;
	cursor: pointer;
	border: 3px solid #fff;
	outline: 1px solid #ddd;
	margin-right: 14px;
	margin-bottom: 14px;
}
#jgal li img {
	margin-top: 70px;
	display: none;
	width: 650px;
	position: absolute;
	left: 35px;
}
#jgal li.active img {
	display: block;
}
#jgal li.active, #jgal li:hover { outline-color: #bbb; opacity: .99 /* safari bug */ }
 
/* styling without javascript */
#gallery { list-style: none; display: block; }
#gallery li { float: left; margin: 0 10px 10px 0; }
 
.main #container #content #images #description {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 1em;
	font-style: normal;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	color: #333;
	text-decoration: none;
	margin: 0px;
	padding: 0px;
	width: 650px;
	position: absolute;
	left: 35px;
}
 
.main #container #menu {
	margin-left: 685px;
	padding-right: 65px;
	text-align: right;
	width: 150px;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 1em;
	text-decoration: none;
	line-height: normal;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	color: #333;
}
 
	.main #container #menu #dhtmlgoodies_listMenu a{	/* Main menu items */
		color:#000;
		text-decoration:none;
		font-weight:normal;
	}
	.main #container #menu #dhtmlgoodies_listMenu ul li a{	/* Sub menu */
		color: #999;
		font-weight:normal;
	}
 
	.main #container #menu #dhtmlgoodies_listMenu .activeMenuLink{	/* Styling of active menu item */
		color:#999;
	}
 
 
	/*
	No bullets
	*/	
	.main #container #menu #dhtmlgoodies_listMenu li{
		list-style-type:none;	
	}
 
	/*
	No margin and padding
	*/
	.main #container #menu #dhtmlgoodies_listMenu, #dhtmlgoodies_listMenu ul{
		margin:0px;
		padding:0px;
	}
 
	/* Margin of sub menu items */
	.main #container #menu #dhtmlgoodies_listMenu ul{
		display:none;
	}
 
.main #container #contact {
	clear: both;
}

rweilert
rweilert's picture
Offline
newbie
Kansas City
Last seen: 11 years 7 weeks ago
Kansas City
Timezone: GMT-5
Joined: 2010-04-20
Posts: 4
Points: 6

Hm... fixed it, but created a new problem

I added html,body{ height: 100%; margin: 0; padding: 0; } and it seems to be the right height. on to the next problem.

rweilert
rweilert's picture
Offline
newbie
Kansas City
Last seen: 11 years 7 weeks ago
Kansas City
Timezone: GMT-5
Joined: 2010-04-20
Posts: 4
Points: 6

still getting problems

I still need help on the longer pages. The content div runs into the the contact div at the bottom.

http://www.polyform-design.com/logo.html

any suggestions would be greatly greatly appreciated as i have googled every help forum to no avail.

@charset "UTF-8";
 
a {
  outline: none;
}
 
html,body{ height: 100%; margin: 0; padding: 0; }
 
body {
	background-color: #333;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 0.7em;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	color: #333;
	margin: 0px;
	border-top-width: 0px;
	border-right-width: 0px;
	border-bottom-width: 0px;
	border-left-width: 0px;
	text-decoration: none;
    height: 100%;
	}
 
.main #container {
	width: 900px;
	background: #FFFFFF;
	border: none;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	height: 100%;
}
.main #container #content {
	float: left;
	width: 650px;
	padding: 0px;
	height: 100%;
	background: #FFFFFF;
}
.main #container #content #welcome p {
	font-style: italic;
	font-size: 1.5em;
	padding: 0px;
	margin-top: 10px;
}
.main #container #content #images {
	margin: 0px;
	padding: 0px;
	float: left;
	width: 650px;
	height: 100%;
	position: relative;
	background: #FFFFFF;
}
 
.main #container #content #logo {
	height: 967px;
}
 
#jgal {
	list-style: none;
	width: 650px;
	height: 100%;
	background: #FFFFFF;
}
#jgal li {
	opacity: .5;
	float: left;
	display: block;
	width: 60px;
	height: 60px;
	background-position: 50% 50%;
	cursor: pointer;
	border: 3px solid #fff;
	outline: 1px solid #ddd;
	margin-right: 10px;
	margin-bottom: 14px;
}
#jgal li img {
	margin-top: 70px;
	display: none;
	width: 650px;
	position: absolute;
	left: 35px;
}
#jgal li.active img {
	display: block;
}
#jgal li.active, #jgal li:hover { outline-color: #bbb; opacity: .99 /* safari bug */ }
 
/* styling without javascript */
#gallery { list-style: none; display: block; }
#gallery li { float: left; margin: 0 10px 10px 0; }
 
.main #container #content #images #description {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 1em;
	font-style: normal;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	color: #333;
	text-decoration: none;
	margin: 0px;
	padding: 0px;
	width: 650px;
	position: static;
	left: 35px;
	height: 100%;
	background: #FFFFFF;
}
 
.main #container #menu {
	background: #FFFFFF;
	height: 100%;
	text-align: right;
	width: 100px;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 1em;
	text-decoration: none;
	line-height: normal;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	color: #333;
	float: right;
	position: relative;
	padding-right: 65px;
}
 
	.main #container #menu #dhtmlgoodies_listMenu a{	/* Main menu items */
		color:#000;
		text-decoration:none;
		font-weight:normal;
	}
	.main #container #menu #dhtmlgoodies_listMenu ul li a{	/* Sub menu */
		color: #999;
		font-weight:normal;
	}
 
	.main #container #menu #dhtmlgoodies_listMenu .activeMenuLink{	/* Styling of active menu item */
		color:#999;
	}
	.main #container #menu #dhtmlgoodies_listMenu li{
		list-style-type:none;	
	}
	.main #container #menu #dhtmlgoodies_listMenu, #dhtmlgoodies_listMenu ul{
		margin:0px;
		padding:0px;
	}
	.main #container #menu #dhtmlgoodies_listMenu ul{
		display:none;
	}
 
.main #container #contact {
	background: #FFFFFF;
	clear: both;
	position: static;
	width: 900px;
}