divs 100% height ?

@k0r54Jan 18.2005

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: –

~~[url]~~www.globe-financial.co.uk[/url]

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

Thanks
Adam

to post a comment

CSS

6 Comments(s) _↴

@ExuroJan 18.2005 — #Your PHP is showing :p

@k0r54authorJan 18.2005 — #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 :mad: and therfore have to redesign as static.

So any idea on the 100%???

@ExuroJan 18.2005 — #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 [url=http://www.alistapart.com/]A List Apart[/url] on a work around for a problem like this, so I went and dug it up for you:

[url=http://www.alistapart.com/articles/fauxcolumns/]http://www.alistapart.com/articles/fauxcolumns/[/url]

@k0r54authorJan 18.2005 — #Hi,

I have a real problem on my hands i need to redesign this page over to CSS, i did make it in tables :o (sorry) but i am really stuck.

This is the tables page : -

http://www.private.apc-compunet.co.uk/websites/globe-financial/main/equity/equity.php

Now so far i have : -

HTML

[CODE]
 <!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="../../css/main2.css" rel="stylesheet" type="text/css">
 </head>
 
 <body>
 <div id="masterheader">
 <div id="logo"><img src="../../images/banner/banner_centre.jpg" width="678" height="150"></div>
 <div id="bordertop"><img src="../../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:D27CDB6E-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="../../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>
 
   <!-- SHOULD I BE USING A TABLE HERE -->
   <table width="100"  border="0" align="left" cellpadding="0" cellspacing="0">
   <tr>
   <td align="center" width="90"><a href="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 &amp; 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>
 [/CODE]

CSS

[CODE]
 /* 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;
 }
 [/CODE]

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

k0r54

@k0r54authorJan 18.2005 — #Hi, please ignore that last post (UNLESS you feel you can help with the bigger picture :d).

Anyway i now have this here : -

http://www.privatedemo.apc-compunet.co.uk/webdev/vince/new.htm

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

Thanks

Adam

@heavenly_blueJan 18.2005 — #

[CODE]
 <html>
 <head>
 <title>Untitled Document</title>
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
 <style type="text/css"><!--
 body{background-color:#fff; margin:0; padding:0; height:100%;}
 #leftborder{width:22px; background-color:#000; height:100%;}
 --></style>
 </head>
 <body>
 <div id="leftborder"></div>
 </body>
 </html>
 [/CODE]

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.

Also in #CSS _↴

Images (.png) and float containers column break again: an IE fault (/fart)

Success!

Help @k0r54 spread the word by sharing this article on Twitter...

Tweet This

divs 100% height ?

6 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

divs 100% height ?

6 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

6 Comments(s) _↴

Also in #CSS _↴