Help with CSS. Done with  

5 replies
  • WEB DESIGN
  • |
Hey all. Quick disclosure: I'm still learning and i'm working on this site for a client, for free.

Like I said, i'm building a site for a client. Nothing too fancy. Left sidebar and content on the right. I'm currently using non breaking spaces to extend the sidebar and the content areas all the way to the bottom, since there is not enough content to fill the page. I know there is an easier and better way. CSS most likely. However, I've tried height="100%' and many variations of that, to no avail.

Help please?


Code:
body {
	margin: 0;
	padding: 0;
	background: url(images/bg.png);
	font-family: 'Trebuchet MS', Helvetica, sans-serif;
	font-size: 14px;	
}

a {
	color: #135293;
	text-decoration: none
}

a:hover {
	text-decoration: underline;
}

/* Page */

#page {
	width: 900px;
	margin: 0 auto;
	background: #FFFFFF;
}

/* Sidebar */

#sidebar {
	float: left;
	width: 220px;
	height:100%;
	min-height:100%;
}

/* Logo */

#logo {
	height: 180px;
	background: #FFFFFF url(images/img02.gif) repeat-x; ;
}

/* Menu */

#menu {
	padding: 20px;
	background: url(images/nav-bg.png) ;


}

#menu ul {
	margin: 0;
	padding: 0;
	list-style: none;
	background: url(images/nav-under.gif) repeat-x;

}

#menu li {
	padding: 10px 0;
	background: url(images/nav-under.gif) repeat-x;

}

/*	
	#menu li.first {
	background: url(images/nav-bg.png) ;
}

*/
#menu a {
	text-decoration: none;
	font-size: 129%;
	color: #ffffff;
}

#menu a:hover {
	text-decoration: underline;
	color: #135293
}



/* Content */

#content {
	float: right;
	width: 680px;
	background: #ffffff;
	font-size: 16px;
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Families in Crisis</title>
<meta name="keywords" content="families in crisis, family abuse, domestic abuse, bell county, " />
<meta name="description" content="Families In Crisis, Inc., a 501(c) (3) non-profit organization, supports and empowers victims of family violence and sexual assault." />
<meta name="robots" content="index, follow">
<link type="text/plain" rel="author" href="../humans.txt" />
<link rel="shortcut icon" href="../favicon.ico">
<link rel="icon" href="../favicon.ico">
<link href="../style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="page">
	<div id="sidebar">
		<div id="logo">
			<img src="../images/img2.png" alt="Helping Those In Need" height="180" />
		</div>
		<div id="menu">
			<ul>
				<li class="first"><a href="../">Home</a></li>
				<li><a href="about.html">About</a></li>
				<li><a href="services.html">Services</a></li>
				<li><a href="volunteer.html">Volunteer Oppurtunities</a></li>
				<li><a href="wish.html">Wishlist/Donations</a></li>
				<li><a href="links.html">Links</a></li>
				<li><a href="contact.html">Contact</a></li>
				<li><a href="tour.html">Virtual Tour</a></li>
				<li><a href="espanol.html">En Espanol</a></li>
				<li><form action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="4QDJDAENXMGTL">
<input type="image" src="https://www.paypalobjects.com/WEBSCR-640-20110306-1/en_US/i/btn/btn_donateCC_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
<img alt="" border="0" src="https://www.paypalobjects.com/WEBSCR-640-20110306-1/en_US/i/scr/pixel.gif" width="1" height="1">
</form>
</li>
				<li></li>
			</ul>

			<p>&nbsp;</p>
			<p>&nbsp;</p>
			<p>&nbsp;</p>
			<p>&nbsp;</p>
			<p>&nbsp;</p>
			<p>&nbsp;</p>

			
			
				
		</div>
	</div>
	<div id="content">
		<img src="../images/header.png" alt="Families In Crisis, Inc." />

	<h1>About</h1>
		<blockquote>
			Families In Crisis, Inc., a 501(c)(3) United Way agency, was established in 1978 to assist and empower victims of family violence and sexual assault in Bell, Coryell, and Hamilton counties, including Fort Hood, the nation's largest military installation. Services provided include emergency safe shelter; provision of food, clothing, and personal items; transportation assistance and referral to medical, legal, law enforcement and social service agencies in the community; a 24-hour crisis hotline; crisis intervention counseling; support groups; and educational groups. The agency also provides outreach services. Families In Crisis, Inc. strives to create a non-judgmental, supportive environment in which victims of family violence and sexual assault can assess their individual situations, plan short-term and long-term goals, and gain necessary information to make decisions which support the attainment of these goals. Our services, which are confidential and free of charge, promote responsibility and self-reliance through this goal-oriented approach, helping clients become more effective as individuals, as parents, and as citizens.

		<p>&nbsp;</p>
		<p>&nbsp;</p>
		<p>&nbsp;</p>


			<hr>
<p style="text-align: center;">
Families In Crisis, Inc.
P.O. Box 25 Killeen, TX 76540</br>
Tel: 254-634-1184 or 254-773-7765</br>
Fax: 254-526-6111</br>
24-hr hotline: 1-888-799-SAFE</br>
A United Way Agency</br>
</p>

		<p>&nbsp;</p>
		</blockquote>

			

	</div>
</div>
<div id="footer">
	<p><center>Copyright &copy; 2011 Families In Crisis, Inc. All Rights Reserved.</center></p>
</div>
</body>
</html>
#andnbsp #css
  • Profile picture of the author Istvan Horvath
    Instead of over-complicating it... put content into the site/page. If not else, the Lorem ipsum... text
    Signature

    {{ DiscussionBoard.errors[3660296].message }}
  • Profile picture of the author Harry Spencer
    Does the parent container also have the height set to 100%?

    I know it isn't the best solution but you could try adding a image of the desired size to the background of the navigation.

    Hope that helps
    Signature

    Follow me on Twitter and My Blog
    200 FREE Sources of Stock Photos, Images, Backgrounds and Textures Free PDF no opt-in
    Download My Training Call With Lee McIntyre Over 70 Minutes Of Juicy Internet Marketing Content FREE

    {{ DiscussionBoard.errors[3660434].message }}
  • Profile picture of the author Harry Spencer
    Just had a Google might not be possible in all browsers, could try using a image in the background.

    css - Extending sidebar down page - Stack Overflow
    Signature

    Follow me on Twitter and My Blog
    200 FREE Sources of Stock Photos, Images, Backgrounds and Textures Free PDF no opt-in
    Download My Training Call With Lee McIntyre Over 70 Minutes Of Juicy Internet Marketing Content FREE

    {{ DiscussionBoard.errors[3660468].message }}
    • Profile picture of the author ronc0011
      I may be wrong on this one but I don't think you can use % on a min-width value. I'm sure someone will correct me if that's not right.

      Another way to approach this is the way you use borders. Use a border on the longer container and on the adjoining container leave off that border so that it shares the border with the longer container. Then let the top of your footer supply the bottom border of your content and sidebar area.

      I notice you don't have a height set for your content area. If this is applied across many pages then that's a good practice as it will make it more flexible. If it were me I would do the same with the sidebar and use the borders to tie everything together.
      {{ DiscussionBoard.errors[3660633].message }}
  • Profile picture of the author Lloyd Buchinski
    I didn't really understand the question until Istvan's comment, but if you just want the page longer than the content, you can just add as many <br /> as you want. Each one will make it one blank line longer. That's not much different from what you have in the code, the &nbsp; between paragraph tags. I did see those lately in the sales page code for a product by one of the more advanced members here.

    Neither one of those is really slick but they get the job done.

    Or maybe ezine articles would have the topic covered and you could use one of those for more content. That could help things out.

    If you do want to use inline css, you could just use a span style for the last element on the page and specify margin-bottom:96px; (96 px gives you an inch, multiply by whatever you want)
    Signature

    Do something spectacular; be fulfilled. Then you can be your own hero. Prem Rawat

    The KimW WSO

    {{ DiscussionBoard.errors[3662630].message }}

Trending Topics