divs 100% height ?

liunx · Jan 11, 2008

Hi, firstly sorry im designing a site in css and strugglin abit so there r gonna b a few simple threads.

Ok how do i get 100% height like the left and right border going down this website: -

<a class="postlink" href="http://www.globe-financial.co.uk">www.globe-financial.co.uk</a>

This is a customers site and am redisgnin in css. so how can i get that 100% effect.

Thanks
AdamYour PHP is showing

unfortunatly yes i know

the whole reason i have to redesign. I made the site about a week back and made it in php, but the server my client has gone with doesn't have php

and therfore have to redesign as static.

So any idea on the 100%???Anyway, as to your actual question... There is no way to actually get an element to have a hight of 100% of the page. Instead, it stretches to 100% of the content, which can be kind of irritating, but it does make sense from a CSS standpoint.

However, I remembered this article I read on A List Apart (<a class="postlink" href="http://www.alistapart.com/">http://www.alistapart.com/</a>) on a work around for a problem like this, so I went and dug it up for you:

<a class="postlink" href="http://www.alistapart.com/articles/fauxcolumns/Hi">http://www.alistapart.com/articles/fauxcolumns/Hi</a>,

I have a real problem on my hands i need to redesign this page over to CSS, i did make it in tables

(sorry) but i am really stuck.

This is the tables page : -
<a class="postlink" href="http://www.private.apc-compunet.co.uk/websites/globe-financial/main/equity/equity.php">http://www.private.apc-compunet.co.uk/w ... equity.php</a>

Now so far i have : -

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Page Name</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href=http://www.webdeveloper.com/forum/archive/index.php/"../../css/main2.css" rel="stylesheet" type="text/css">
</head>

<body>
<div id="masterheader">
<div id="logo"><img src=http://www.webdeveloper.com/forum/archive/index.php/"../../images/banner/banner_centre.jpg" width="678" height="150"></div>
<div id="bordertop"><img src=http://www.webdeveloper.com/forum/archive/index.php/"../../images/banner/topleft.JPG" width="22" height="22" align="left"><img src="../../images/banner/topright.JPG" width="22" height="22" align="right"></div>
</div>
<div id="mastercontent">
<div id="borderleft"></div>
<div id="borderright"></div>

<div id="maincontent">
<div id="wheel">
<object classid="clsid

27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://Download .macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="245" height="245">
<param name="movie" value="../../swf/wheel_corner.swf">
<param name="quality" value="high">
<embed src=http://www.webdeveloper.com/forum/archive/index.php/"../../swf/wheel_corner.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="245" height="245"></embed>
</object>
<p class="header">Equity Release<?PHP line($dir); ?></p>


<table width="100" border="0" align="left" cellpadding="0" cellspacing="0">
<tr>
<td align="center" width="90"><a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.fsa.gov.uk/consumer/" target="_blank" style="font-size:12px "><img src="../../images/ifa_logo.jpg" width="80" height="81" border="0"></a></td>
</tr>
</table>
<p class="maintext">These pages provide generic information about various aspects of financial services and provide some ideas and indicators about possible areas of need. We hope they are helpful but they do not, on their own, add up to proper investment advice and we cannot take responsibility for anything you do in reliance on them without further discussion with us. Do not make a decision based upon the information contained within these pages alone. They are not detailed or comprehensive enough to enable you to make a correctly informed decision. </p>
<p class="maintext"><strong>What are safe home income plans & equity release plans? </strong></p>
<p class="maintext">There are a number of schemes, which enable you to tap into the value of your home without having to sell it and move out. Over the past thirty-five years, thousands of retired homeowners have found that these plans provide a safe and successful method of releasing regular income or a cash lump sum, to improve the quality of their life in retirement. </p>
<p class="maintext">The alternative may not be very attractive. Too many elderly homeowners find themselves in the unenviable position of having to watch every penny they spend from day to day, while most of their money remains locked up in their single biggest asset - their home. Home income plans and equity release plans can resolve the problem safely. </p>
<p class="maintext">But there are other schemes on the market which make the same promises - and bitter experience has shown that they are neither safe nor successful. To confuse matters, some of these schemes have sometimes been described as home income plans or equity release plans too.</p>
</div>
</div>

</div>
</body>
</html>

CSS

/* for the body of the document */
body {
background-image:url(../images/banner/bg.jpg);
margin: 0 0 0 0;
}

/* so all images have a 0 margin */
img {
margin: 0;
padding: 0;
border: 0;
}

div {
margin:0;
padding:0;
}

/* for the whole of the header including the top border */
#masterhead {
width: 100%;
height: 172px;
}

#logo {
width: 100%;
text-align:center;
background:#BFBFBD;
height: 150px;
}

#bordertop {
width: 100%;
height: 22px;
background-image:url(../images/banner/banner_bottom.png);
}

#bordercorners {
width: 22px;
height: 22px;
}

#borderleft {
float: left;
width: 22px;
background-image:url(../images/banner/left.png);
height:100%;
}

#borderright {
float:right;
width: 22px;
background-image:url(../images/banner/right.png);
height:100%;
}

#maincontent {
float: left;
width: 93%;
}

#wheel {
width: 245px;
}

/* this is the header text */
.header {
font-size:27px;
font-family:Tahoma;
color:#FFCC33;
text-align:center;
font-style:italic;
}

/* this is the main text */
.maintext {
font-size:16px;
font-family: Arial;
color:#FFFFFF;
text-align:justify;
}

Now, it just not looking the same, it needs to look exactly the same but i am struggling to get the layout right, if someone could push me in the right direction as my divs are not aligning right and the text is going all wrong.

Please help im in a mad rush.

Thanks
k0r54Hi, please ignore that last post (UNLESS you feel you can help with the bigger picture :d).

Anyway i now have this here : -
<a class="postlink" href="http://www.privatedemo.apc-compunet.co.uk/webdev/vince/new.htm">http://www.privatedemo.apc-compunet.co. ... ce/new.htm</a>

but for some reason the 100% is going past the bottom of the page, why is this?

Thanks
Adam<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css"></style>
</head>
<body>
<div id="leftborder"></div>
</body>
</html>

If you include the DocType, this won't display the way you want it to in Non-IE browsers. I'd try something else any ways, like the FauxColumns suggested above.

divs 100% height ?

liunx

Guest