Div backgroud not appearing?

Dear All,
I have a link here http://183.78.169.54/tree/3.html. The problem for the div id=sidebar I have add a background-color:#f1f1f1;
in css but seem not to appear the whole div but just a small portion why is it that happens?

check the sidebars height and width, take the help of Firebug, it is really a amazing Firefox add-on for designers!!

Here is an excellent tutorial from Chris Coyier @CSS-Tricks

Fluid Width Equal Height Columns | CSS-Tricks

Dear All,
So the solution I must make the height to be same like the other div on the right is it? I am kind of confuse here?

That is the “easy” fix…

Try Google’ing “equal height columns css”

There are TONS of tutorials to help you find the best solution that would work for you.

A div will normally only be as tall as the content inside it. If you want the appearance of a full-height column, the best solution is usually to use “faux columns”—that is, a background image on the #container div.

Dear All,
I found this link here Equal Height Columns with Cross-Browser CSS and No Hacks but quite complex. Is this how to do it or other simpler method? I prefer not to use background image method which I also saw as an option as it has limitations.

Hi,

You can add the column colour with my absolute overlay technique.

Just add this code:


#container{position:relative;}
#container:after,.after{
	content:" ";
	display:block;
	clear:both;
	position:absolute;
	z-index:1;
	left:0;
	bottom:0;
	top:85px;
	width:200px;
	background:#eee;
}
* html .after{top:auto;height:999em}
#bottom,#sidebar,#top{position:relative;z-index:2;}


To give ie6 and 7 support you would need to add an extra element at the end of the html however if you don’t mind using an expression we can do it with css instead.


#container{
zoom:expression(
		runtimeStyle.zoom=1,
		insertAdjacentHTML('beforeEnd','<span class="after"></span>')
	);
}


Why are your images 1024px wide yet the layout is 680px wide?

You can’t start ids with a digit asd that is invalid. id=“1” would need to be id =“a1” or something similar.

Here is what you can try…

Wrap another div (contentWrapper) around your sidebar and rightcolumn. See below…


<div id="container">
  <div id="top"> </div>
  <div id="contentWrapper">
    <div id="sidebar"> </div>
    <div id="rightcolumn"> </div>
  </div>
  <div id="bottom"> </div>
</div>

Now what you want to do is edit your styles…


#contentWrapper {
	background-color: #f1f1f1;
        min-height: 350px; /* this could be any number you choose, but must be equal to the right column. giving the wrapper a minimum height triggers it to have layout */
}
#sidebar {
	width: 200px;
	left:0px;
	float: left
}
#rightcolumn {
	background-color:#fff;
	width:480px;
        min-height: 350px;
	float:left
}

It is a somewhat sloppy fix to me, but will work in your case…

Here it is added in to your page and your table turned into css also.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="sitemapstyler/sitemapstyler.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript" src="http://183.78.169.54/tree/sitemapstyler/sitemapstyler.js"></script>

<style type="text/css">
/*Sitemap Styler 	*/
#sitemap, #sitemap ul, #sitemap li {
	margin:0;
	padding:0;
	list-style:none;
}
#sitemap ul {display:none;}
#sitemap li {
	line-height:200%;
	border-bottom:1px solid #fff;
	background:#eee;
	position:relative;
	width:100%;
}
/* IE leaves a blank space where span is added so this is to avoid that */
* html #sitemap li {
	float:left;
	display:inline;
}
#sitemap li a {padding-left:28px;}
#sitemap li span {
	float:left;
	position:absolute;
	top:5px;
	left:5px;
	width:13px;
	height:13px;
	cursor:auto;
	font-size:0;
}
#sitemap li span, #sitemap li span.collapsed {
	background:url(http://183.78.169.54/tree/sitemapstyler/collapsed.gif) no-repeat 0 0;
}
#sitemap li span.expanded {
	background:url(http://183.78.169.54/tree/sitemapstyler/expanded.gif) no-repeat 0 0;
}
/* second level */

#sitemap li li {background:#fff;}
#sitemap li li a {padding-left:56px;}
#sitemap li li span {left:28px;}
/* third level */

#sitemap li li li a {padding-left:84px;}
#sitemap li li li span {left:56px;}
form abbr {color:#f00;padding:0 5px;border:none}
/* etc. */
a.current {color:#000;}
a {text-decoration:none;color:#057fac;}
a:hover {text-decoration:none;color:#999;}
h1 {
	font-size:140%;
	margin:0;
	line-height:80px;
}
p {margin:0;padding:1em 0;}

/*  */
html,body{
	margin:0;
	padding:0;
}
body {
	background:#f1f1f1;
	font:70% Arial, Helvetica, sans-serif;
	color:#555;
	line-height:150%;
	text-align:left;
	padding:20px 0;
}
#container {
	margin:0 auto;
	width:680px;
	background:#fff;
	overflow:hidden;/* clear the floats*/
	position:relative;
}
#top img,#bottom img{float:left}
#top,#bottom{overflow:hidden;background:#f00}
#bottom{clear:both;min-height:50px}
#sidebar {
 background-color:#f1f1f1;
	width: 200px;
	float: left
}
#rightcolumn {
	width:480px;
	float:left
}
#content {
	margin:0 20px;
	zoom:1.0;
}
#container:after,.after{
	content:" ";
	display:block;
	clear:both;
	position:absolute;
	z-index:1;
	left:0;
	bottom:0;
	top:85px;
	width:200px;
	background:#eee;
}
* html .after{top:auto;height:999em}
#bottom,#sidebar,#top{position:relative;z-index:2;zoom:1.0}
#container{
zoom:expression(
		runtimeStyle.zoom=1,
		insertAdjacentHTML('beforeEnd','<span class="after"></span>')
	);
}
fieldset{
	border:none;
	border-top:1px solid #000;
	margin:10px 20px;
	padding:20px 0;
}
legend{color:#000;margin:0 10px;padding:0 5px}
.form1 label{
	width:100px;
	display:inline-block;
	vertical-align:middle;
	margin:0 0 10px;
}
.form1 input, .form1 select{
	display:inline-block;
	vertical-align:middle;
	margin:0 0 10px;
}
.error{display:inline-block;padding:0 10px;vertical-align:middle}
</style>
</head>

<body>
<div id="container">
	<div id="top"><h1>heading</h1></div>
	<div id="sidebar">
		<ul id="sitemap">
			<li><a href="#">Driver Profile</a>
				<ul id="a1">
					<li><a href="#">Driver Details</a></li>
					<li><a href="#">Driver Licenses</a></li>
					<li><a href="#">Driver Next Of Kin</a></li>
					<li><a href="#">Driver Employment History</a></li>
				</ul>
			</li>
			<li><a href="#">Driver Fitness</a>
				<ul id="a2">
					<li><a href="#">Medical Record</a></li>
					<li><a href="#">Alcohol Screening</a></li>
					<li><a href="#">Drug Screening</a></li>
				</ul>
			</li>
		</ul>
	</div>
	<div id="rightcolumn">
		<form action="" id="form1">
			<fieldset class="form1">
			<legend>Enter details</legend>
			<label for="driverName">Name<abbr title="required field">*</abbr></label>
			<input id="driverName" name="driverName" value="" />
			<span class="error" id="driverNameError">hello</span><br />
			<label for="driverNewICNo" >New I/C No:<abbr title="required field">*</abbr></label>
			<input id="driverNewICNo" name="driverNewICNo" value="" />
			<span class="error" id="driverNewICNoError" ></span><br />
			<label for="driverOldICNo" class="description">Old I/C No:</label>
			<input class="text" id="driverOldICNo" name="driverOldICNo" value="" />
			<br />
			<label for="driverAddress" class="description">Address:</label>
			<textarea rows="5" cols="20" class="textarea" id="driverAddress" name="driverAddress"></textarea>
			<br />
			<label for="driverReligion" class="description">Religion:</label>
			<select class="select" id="driverReligion" name="driverReligion">
				<option value="">-Select Religion-</option>
				<option value="Muslim">Muslim</option>
				<option value="Christian">Christian</option>
				<option value="Buddhist">Buddhist</option>
				<option value="Hindu">Hindu</option>
				<option value="Sikh">Sikh</option>
				<option value="Others">Others</option>
			</select>
			<br />
			<label for="driverRace" class="description">Race:</label>
			<input class="text" id="driverRace" name="driverRace" value="" />
			<br />
			<label for="driverTelMobile" class="description">Mobile Tel No:</label>
			<input class="text" id="driverTelMobile" name="driverTelMobile" value="" />
			<span class="error" id="driverTelMobileError" ></span> <br />
			<label for="driverManualPoints" class="description">Manual Points<abbr title="required field">*</abbr></label>
			<input class="text" id="driverManualPoints" name="driverManualPoints" value="" />
			<span class="error" id="driverManualPointsError" ></span> <br>
			</fieldset>
		</form>
	</div>
	<div id="bottom">Footer</div>
</div>
</body>
</html>



Yes it’s best to avoid doing that if you can as you mention :slight_smile:

It will only work as long as the right column is longest and is something that cannot be guaranteed especially as there looks to be an opening and closing tree menu in the left column. :slight_smile:

I see time and time again the same problem in the forums where the author has coded a fixed height or a min-height but later on the layout has evolved and those dimensions are not relevant anymore and indeed incorrect if the layout has been zoomed or text resized.

Therefore while it will work in confined situations it’s a technique to be avoided as you want it as foolproof and future proof as possible.:slight_smile:

Sound advice mate! :wink:

But, he did ask for a simpler method, right? Lol.

You fixed him up just wonderfully.

Yes True :slight_smile: - and indeed it may serve the purpose this time (I was just being devils advocate and not meant as a put down.)

Lol. No harm. No fouls.

All good advice for someone new to CSS. :slight_smile:

Dear All,
Thank you guys let me digest it first too much for a new comer and let test few things and get hold of it.