Forum Moderators: not2easy
hoping you would be able to help me with this as its seriously puzzling. I have designed a site to have a 100% height with css using a method i found while searching google, now - thank god i hear you say - this isnt the problem.
I have two main columns within the page which are giving me the troubles. Basically i had to position the right colum relatively and float it right otherwise (as far as i know) it wouldnt be seen as the container in terms of it being 100%. If i am wrong on this let me know as positioning this absolute would solve it straight away.
Anyways, here is the code for the home page, if you could let me know it would be much appreciayed.
Cheers all
CSS
* {
padding: 0;
margin: 0;
}
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 75%;
}
h1 {
font-size: 1.4em;
padding: 10px 10px 0;
}
p {
padding: 0 10px 1em;
}
html, body {
height: 100%;}
#container {
min-height: 100%;
width: 868px;
margin: 0 auto;
margin-top:0px;
}
* html #container {
height: 100%;
}
#container2 {
min-height: 100%;
width: 868px;
background:url(images/container_bg.gif);
}
#container2 img {
border:none;
}
* html #container {
height: 100%;
}
DIV#header{
HEIGHT: 203px;
WIDTH: 868px;
position: relative;
background:url(images/header.gif) no-repeat;
z-index:100;
}
DIV#callbackbox{
HEIGHT: 167px;
WIDTH: 261px;
position: relative;
margin-right:30px;
margin-top:10px;
float:right;
clear:right;
}
DIV#callbackbox_button{
HEIGHT: 21px;
WIDTH: 99px;
position: absolute;
top: 141px;
left: 126px;
}
DIV#callbackbox_button a{
font-family:Geneva, Arial, Helvetica, sans-serif;
font-size:14px;
color:#666;
font-weight:bold;
padding-bottom:3PX;
}
DIV#callbackbox_button a:hover{
color:#fff;
text-decoration:none;
}
DIV#car_image{
HEIGHT: 147px;
WIDTH: 265px;
position: relative;
margin-top:10px;
margin-right:27px;
float:right;
clear:right;
}
#main_content{
WIDTH: 550PX;
position: relative;
top: 0px;
left: 20px;
}
#main_content p{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
line-height:18px;
}
#main_content h1{
font-family:Geneva, Arial, Helvetica, sans-serif;
font-size:22px;
color:#1589c2;
font-weight:normal;
}
#main_content li {
FONT-SIZE: 11px;
MARGIN: 0px;
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#000000;
list-style: square inside #fcce88;
color:#000;
margin-left:20px;
line-height:18px;
}
#main_content ul {
FONT-SIZE: 11px;
MARGIN-left: 50px;
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#000000;
}
img.whiplash {float: left; clear: left; margin: 0 1em 0 0;}
DIV#nav{
position: absolute;
top:164px;
left: 250px;
}
DIV#nav a{
color:#FFFFFF;
margin-left:15px;
margin-right:15px;
font-weight:bold;
text-decoration:none;
vertical-align:middle;
}
DIV#nav a:hover{
text-decoration:underline;
}
DIV#ref{
position: absolute;
top:112px;
left: 703px;
}
DIV#ref h1{
font-family:Geneva, Arial, Helvetica, sans-serif;
font-size:22px;
color:#faa21b;
font-weight:normal;
}
#footer {
height: 77px;
width: 868px;
background:url(images/footer_bg.gif) no-repeat;
padding-top: 10px;
margin: 0px auto 0 auto;
}
DIV#footer_nav{
position: relative;
top:20px;
left: 250px;
width:400px;
}
DIV#footer_nav p{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:9px;
color:#000;
}
DIV#footer_nav a{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
color:#000;
margin-left:15px;
margin-right:15px;
text-decoration:none;
}
DIV#footer_nav a:hover{
text-decoration:underline;
}
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"><link href="layout1.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="container">
<div id="header">
<div id="nav"><a href="default.htm">Home</a> <img align="middle" src="images/nav_sep.gif"> <a href="services.htm">Services</a> <img align="middle" src="images/nav_sep.gif"> <a href="can_i_claim.htm">Can I Claim</a> <img align="middle" src="images/nav_sep.gif"> <a href="contact.htm">Contact Us</a></div>
<div id="ref">
<h1>457</h1>
</div>
</div>
<div id="container2">
<div id="callbackbox">
<div id="callbackbox_button"><a href="call_back_contact.htm">Call me Back</a></div>
<a href="call_back_contact.htm"><img src="images/call_me_back_box.gif"> </a></div>
<div id="car_image">
<img src="images/merc_damage.gif"</div>
<div id="main_content">
<h1>title</h1><br>
<p>imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttr eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, <img src="images/whiplash_1.gif" class="whiplash">
<img src="images/whiplash_2.gif" class="whiplash">
<img src="images/whiplash_3.gif" class="whiplash">
<img src="images/whiplash_4.gif" class="whiplash">
<img src="images/whiplash_5.gif" class="whiplash">
<img src="images/whiplash_6.gif" class="whiplash">
<img src="images/whiplash_7.gif" class="whiplash">
<img src="images/whiplash_8.gif" class="whiplash">
<img src="images/whiplash_9.gif" class="whiplash">
viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. </p>
</div>
</div>
<div id="footer">
<div id="footer_nav"><p><a href="default.htm">home</a> ¦ <a href="services.htm">services</a> ¦ <a href="can_i_claim.htm">can i claim</a> ¦ <a href="contact.htm">contact us</a></p></div>
</div>
</div>
</body>
</html>
Cheers in advance.
