Hi there nit,
and a warm welcome to these forums. 
Firstly, let's get your page validated with a dtd and some minor modifications...
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" >
<title>YOU'LL NEVER WALK ALONE</title>
<link href="css/style.css" rel="stylesheet" type="text/css" >
<script type="text/javascript">
if (document.images)
{
pic1on= new Image(65,43);
pic1on.src="layout_pics/news_on.png";
pic2on= new Image(71,43);
pic2on.src="layout_pics/events_on.png";
pic3on= new Image(78,43);
pic3on.src="layout_pics/the_club_on.png";
pic4on= new Image(73,43);
pic4on.src="layout_pics/photos_on.png";
pic5on= new Image(65,43);
pic5on.src="layout_pics/forum_on.png";
pic6on= new Image(76,43);
pic6on.src="layout_pics/contact_on.png";
pic7on= new Image(105,43);
pic7on.src="layout_pics/members_on.png";
pic1off= new Image(65,43);
pic1off.src="layout_pics/news.png";
pic2off= new Image(71,43);
pic2off.src="layout_pics/events.png";
pic3off= new Image(78,43);
pic3off.src="layout_pics/the_club.png";
pic4off= new Image(73,43);
pic4off.src="layout_pics/photos.png";
pic5off= new Image(65,43);
pic5off.src="layout_pics/forum.png";
pic6off= new Image(76,43);
pic6off.src="layout_pics/contact.png";
pic7off= new Image(105,43);
pic7off.src="layout_pics/members.png";
}
function lightup(imgName) {
if (document.images)
{
imgOn=eval(imgName + "on.src");
document[imgName].src= imgOn;
}
}
function turnoff(imgName) {
if (document.images)
{
imgOff=eval(imgName + "off.src");
document[imgName].src= imgOff;
}
}
</script>
</head>
<body>
<div id="wholeSite" class="wholeSiteDiv">
<div id="crown" class="crownDiv"><img src="layout_pics/crown.jpg" alt="You'll Never Walk Alone" width="408" height="157"></div>
<div id="sponsorBar" class="sponsorBarDiv"></div>
<div id="headerBar" class="headerBarDiv"><img src="layout_pics/HEAD1.jpg" width="750" height="289" alt=""></div>
<div id="navBar" class="navBarDiv">
<a href="news/news.php" onMouseover="lightup('pic1')" onMouseout="turnoff('pic1')"><img src="layout_pics/news.png" name="pic1" alt="news" width="65" height="43"/></a>
<a href="events/events.php" onMouseover="lightup('pic2')" onMouseout="turnoff('pic2')"><img src="layout_pics/events.png" name="pic2" alt="events" width="71" height="43"/></a>
<a href="the_club/the_club.php" onMouseover="lightup('pic3')" onMouseout="turnoff('pic3')"><img src="layout_pics/the_club.png" name="pic3" alt="the club" width="78" height="43"/></a>
<a href="photos/photos.php" onMouseover="lightup('pic4')" onMouseout="turnoff('pic4')"><img src="layout_pics/photos.png" name="pic4" alt="photos" width="73" height="43"/></a>
<a href="forum" onMouseover="lightup('pic5')" onMouseout="turnoff('pic5')"><img src="layout_pics/forum.png" name="pic5" alt="forum" width="65" height="43"/></a>
<a href="contact/contact.php" onMouseover="lightup('pic6')" onMouseout="turnoff('pic6')"><img src="layout_pics/contact.png" name="pic6" alt="contact" width="76" height="43"/></a>
<a href="/member" onMouseover="lightup('pic7')" onMouseout="turnoff('pic7')"><img src="layout_pics/members.png" name="pic7" alt="members area" width="105" height="43"/></a>
</div>
<div id="titleBar" class="titleBarDiv"><span class="pageHeader">WELCOME TO THE OFFICIAL LIVERPOOL SUPPORTERS CLUB, MAURITIUS BRANCH</span><hr></div>
<!--Start of mainBody -->
<div id="mainBody" class="mainBodyDiv">
<!--Start of leftCol -->
<div id="leftCol" class="leftColDiv">
<form name="form2" method="post" action="#">
<fieldset>
<legend>Member Login</legend>
Login:<br>
<input name="textfield3" type="text" size="16"><br />
Password:<br>
<input name="textfield32" type="text" size="16"><br />
<a href="button">Sign In</a><br />
</fieldset>
<fieldset>
<legend>Latest News</legend>
Lauch of the new Website<br />
Members meeting at Arena Club
</fieldset>
<fieldset>
<legend>League Table</legend>
The league table goes here
</fieldset>
<fieldset>
<legend>Next Match</legend>
SOUTH CHINA FC (a) <br />
13:15 Tue 24th July <br />
Friendly
</fieldset>
</form>
<form name="form3" method="post" action="#">
<fieldset>
<legend>Shouts</legend><br />
<div id="shoutBoxTitle" class="shoutBoxTitleDiv">Steven shouts:</div>
<div id="shoutBox" class="shoutBoxDiv">We will win the Premier League in 2008!!!</div>
<label> Text:<br>
<textarea name="textarea2" rows="2" cols="20"></textarea>
</label>
<p>Your name:
<label>
<input type="text" name="textfield">
</label>
</p>
<p><a href="shout">Shout it!</a></p>
</fieldset>
</form>
</div>
<!--End of leftCol -->
<!--Start of rightCol -->
<div id="rightCol" class="rightColDiv">
<p><span class="headline">Who we are </span><br>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing <a href="yahoo.com">Lorem Ipsum</a> passages,and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<p><span class="headline">L'hiver p batte plein dans morice </span><br>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<p><span class="headline">Liverpool 2007-2008 Premier League Champions?</span><br>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of <a href="http://www.google.mu/search?hl=en&q=Letraset+sheets&btnG=Google+Search">Letraset sheets</a> containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div><!--End of rightcol -->
</div><!--End of mainBody -->
<div id="footerBarDiv" class="footerBarDiv smallFont"> (C) 2007 Liverpool Supporters Club Mauritius - All Rights Reserved</div>
<div id="spacerBar" class="spacerBarDiv"><img src="layout_pics/credits.jpg" alt="website designed by The Chirapapins" width="200" height="30"></div>
</div><!--End of wholeSite -->
</body>
</html>
Now add these two rules to your stylesheet...
Code:
.mainBodyDiv:after {
content:'';
display:block;
clear:both;
}
.navBarDiv img {
border:0 solid;
}
...and amend these rules as shown...
Code:
.leftColDiv {
float:left;
width:175px;
display:inline;
padding-top:20px;
padding-right:10px;
padding-bottom:20px;
margin-top:0;
margin-left:5px;
border-right:1px dashed #999;
border-bottom:1px dashed #999;
}
.rightColDiv {
float:left;
width:574px;
display:inline;
padding-top:20px;
padding-left:5px;
margin-top:0;
margin-left:10px;
margin-right:20px;
}
fieldset {
border: 1px solid #999;
padding: 15px;
margin:15px 0;
}
coothead
New Comer (less than 5 posts)
Parent div not growing
Posting Permissions
Reply With Quote
Bookmarks