Stretching a <div> to the right-bottom corner

pdedecker · June 13, 2006

Hi again,How do I stretch a <div> to the right-bottom corner of the page? I already tried width="100%" combined with height="100%" but that didn't work.

scott100 · June 13, 2006

I already tried width="100%" combined with height="100%" but that didn't work.

Works fine for me

<head><style>body{padding:o;margin:0}div{background-color:red;width:100%;height:100%;border:5px solid green}</style></head><body><div><h1>Hello</h1></div></body>

Sometimes if you add background colours to your div it can help you to see what is going on

pdedecker · June 14, 2006

It's still not working. Here is the entire source code (I know that it's a bit messed up ):

<html><head><title>BETAserver v4</title><script src="/js/scriptaculous/prototype.js" type="text/javascript"></script><script src="/js/scriptaculous/scriptaculous.js" type="text/javascript"></script><style>body{padding:0;margin:0}a.noline-white { color: white; text-decoration: none; font-weight: bold }div.home{background-color:red;width:100%;height:100%;border:5px solid green}</style><script language="JavaScript">var activetab = 'home';function hideAllTabs() {Element.hide('news');}function switchTab(tab) {if (activetab == tab) {	new Effect.Highlight(activetab, {startcolor: '#336699', endcolor: '#4477AA', restorecolor: '#225588'});}else {	new Effect.BlindUp(activetab);	new Effect.BlindDown(tab);	activetab = tab;}}</script><link rel="stylesheet" href="/css/style.css"/></head><body onLoad="hideAllTabs();"><div id="header" width="100%" style="background-color: #003366;">	<div id="navbar" style="float: right">  <table><tr height="50" style="color: white; font-family: Verdana"> 	 <td style="background-color: #FFFFFF"></td> 	 <td width="75" onClick="switchTab('home')" href="#"><a href="#" class="noline-white"><center>Home</center></a></td> 	 <td style="background-color: #FFFFFF"></td> 	 <td width="75" onClick="switchTab('news')" href="#"><a href="#" class="noline-white"><center>Nieuws</center></a></td> 	 <td style="background-color: #FFFFFF"></td> 	 <td width="75" onClick="alert('Nog niet gemaakt :)')" href="#"><a href="#" class="noline-white"><center>Test</center></a></td> 	 <td style="background-color: #FFFFFF"></td> 	 <td width="75" onClick="alert('Nog niet gemaakt :)')" href="#"><a href="#" class="noline-white"><center>Test</center></a></td>  </tr></table>	</div>	<div id="logotxt">  <table><tr height="50"><td style="color: white; font-family: Verdana">     <b>BETAserver v4</b> 	 <div id="navbar" align="right" style="font-size: 9">    news.at.your.fingertips 	 </div>  </td></tr></table>	</div></div><div id="line" width="100%" height="5" style="background-color: #114477; font-size: 9; color: white" align="right" class="whitetxt">Do: <a href="#" class="whitetxt" onClick="var switchwhattab = prompt('Switch what tab?', ''); switchTab(switchwhattab)">switchTab</a> - <a href="#" class="whitetxt" onClick="switchTab('logotxt');switchTab('line');switchTab('navbar');switchTab('news');switchTab('home');">Mess up the layout :)</a></div><div id="news" width="100%" height="100%" style="background-color: #225588; position: absolute; top: 66px"><br /><center><table>	<tr>  <td width="80%"> 	 <center> 	 <div class="title-rss"><a class="title-rss" href="detail.php?category=news">Nieuwsoverzicht</a></div><br /> 	 <?php include("http://" . $_SERVER['SERVER_NAME']."/rss/smallbox.php?url=http://www.standaard.be/Rss.aspx&url2=section&url3=front&items=5") ?> 	 </center>  </td>  <td> 	 <center> 	 <div class="title-rss">Bron:</div><a href="http://www.standaard.be" target="_blank" class="src-rss"><img alt="De Standaard Online" title="De Standaard Online" border="0" src="/img/logos/dso.png"/><br /><br /><div class="src-rss">De Standaard Online</div></a> 	 </center>	</tr></table><br /><br /><table>	<tr>  <td width="30%"> 	 <center> 	 <div class="title-rss"><a class="title-rss" href="#detail.php?category=news&section=binnenland">Binnenland</a></div><br /> 	 <?php include("http://" . $_SERVER['SERVER_NAME']."/rss/smallbox.php?url=http://www.standaard.be/Rss.aspx&url2=section&url3=Nieuws&url4=subsection&url5=binnenland"); ?> 	 </center> 	 <br /> 	 <br />  </td>  <td width="30%"> 	 <center> 	 <div class="title-rss"><a class="title-rss" href="#detail.php?category=news&section=buitenland">Buitenland</a></div><br /> 	 <?php include("http://" . $_SERVER['SERVER_NAME']."/rss/smallbox.php?url=http://www.standaard.be/Rss.aspx&url2=section&url3=Nieuws&url4=subsection&url5=buitenland"); ?> 	 </center> 	 <br /> 	 <br />  </td>	</tr>	<tr>  <td width="30%"> 	 <center> 	 <div class="title-rss"><a class="title-rss" href="#detail.php?category=news&section=sport">Sport</a></div><br /> 	 <?php include("http://" . $_SERVER['SERVER_NAME']."/rss/smallbox.php?url=http://www.standaard.be/Rss.aspx&url2=section&url3=Nieuws&url4=subsection&url5=sport"); ?> 	 </center> 	 <br /> 	 <br />  </td>  <td width="30%"> 	 <center> 	 <div class="title-rss"><a class="title-rss" href="#detail.php?category=news&section=cultuur">Cultuur</a></div><br /> 	 <?php include("http://" . $_SERVER['SERVER_NAME']."/rss/smallbox.php?url=http://www.standaard.be/Rss.aspx&url2=section&url3=Nieuws&url4=subsection&url5=cultuur"); ?> 	 </center> 	 <br /> 	 <br />  </td>	</tr></table></center></div><div class="whitetxt-Arial" id="home" width="100%" height="100%" style="background-color: #225588; position: absolute; top: 66px"><br />gdsqhd</div></body></html>

Contents of the stylesheet attached to this web page:

/* rss feed thingies */div.title-rss { font-family: Arial; text-decoration: none; color: white; font-size: 15; font-weight: bold }a.title-rss { font-family: Arial; text-decoration: none; color: white; font-size: 15; font-weight: bold }a.headings-rss { font-family: Arial; text-decoration: none; color: white; font-size: 12 }a.src-rss { font-family: Arial; text-decoration: none; color: white; font-size: 12 }/* white */a.whitetxt { color: white }div.whitetxt { color: white }/* white with Arial */a.whitetxt-Arial { font-family: Arial; text-decoration: none; color: white; }div.whitetxt-Arial { font-family: Arial; text-decoration: none; color: white; }

What's wrong with this code? I'm still not very good at doing web design (that means programming and layouting), but I'm learning.

scott100 · June 14, 2006

You were styling a div at the bottom which was irrelevant: <div class="whitetxt-Arial" if you style the div with id news that fixed it.

<html><head><title>BETAserver v4</title><script src="/js/scriptaculous/prototype.js" type="text/javascript"></script><script src="/js/scriptaculous/scriptaculous.js" type="text/javascript"></script><style>body{padding:0;margin:0}a.noline-white { color: white; text-decoration: none; font-weight: bold }.outer{background-color:red;width:100%;height:100%;border:5px solid green}</style><script language="JavaScript">var activetab = 'home';function hideAllTabs() {Element.hide('news');}function switchTab(tab) {if (activetab == tab) {new Effect.Highlight(activetab, {startcolor: '#336699', endcolor: '#4477AA', restorecolor: '#225588'});}else {new Effect.BlindUp(activetab);new Effect.BlindDown(tab);activetab = tab;}}</script><link rel="stylesheet" href="/css/style.css"/></head><body onLoad="hideAllTabs();"><div id="header" width="100%" style="background-color: #003366;"><div id="navbar" style="float: right"> <table><tr height="50" style="color: white; font-family: Verdana">  <td style="background-color: #FFFFFF"></td>  <td width="75" onClick="switchTab('home')" href="#"><a href="#" class="noline-white"><center>Home</center></a></td>  <td style="background-color: #FFFFFF"></td>  <td width="75" onClick="switchTab('news')" href="#"><a href="#" class="noline-white"><center>Nieuws</center></a></td>  <td style="background-color: #FFFFFF"></td>  <td width="75" onClick="alert('Nog niet gemaakt ')" href="#"><a href="#" class="noline-white"><center>Test</center></a></td>  <td style="background-color: #FFFFFF"></td>  <td width="75" onClick="alert('Nog niet gemaakt ')" href="#"><a href="#" class="noline-white"><center>Test</center></a></td> </tr></table></div><div id="logotxt"> <table><tr height="50"><td style="color: white; font-family: Verdana">    <b>BETAserver v4</b>  <div id="navbar" align="right" style="font-size: 9">   news.at.your.fingertips  </div> </td></tr></table></div></div><div id="line" width="100%" height="5" style="background-color: red; font-size: 9; color: white" align="right" class="whitetxt">Do: <a href="#" class="whitetxt" onClick="var switchwhattab = prompt('Switch what tab?', ''); switchTab(switchwhattab)">switchTab</a> - <a href="#" class="whitetxt" onClick="switchTab('logotxt');switchTab('line');switchTab('navbar');switchTab('news');switchTab('home');">Mess up the layout </a></div><div class="outer" id="news"><br /><center><table border="1"><tr> <td width="80%">  <center>  <div class="title-rss"><a class="title-rss" href="detail.php?category=news">Nieuwsoverzicht</a></div><br />  <?php include("http://" . $_SERVER['SERVER_NAME']."/rss/smallbox.php?url=http://www.standaard.be/Rss.aspx&url2=section&url3=front&items=5") ?>  </center> </td> <td>  <center>  <div class="title-rss">Bron:</div><a href="http://www.standaard.be" target="_blank" class="src-rss"><img alt="De Standaard Online" title="De Standaard Online" border="0" src="/img/logos/dso.png"/><br /><br /><div class="src-rss">De Standaard Online</div></a>  </center></tr></table><br /><br /><table><tr> <td width="30%">  <center>  <div class="title-rss"><a class="title-rss" href="#detail.php?category=news&section=binnenland">Binnenland</a></div><br />  <?php include("http://" . $_SERVER['SERVER_NAME']."/rss/smallbox.php?url=http://www.standaard.be/Rss.aspx&url2=section&url3=Nieuws&url4=subsection&url5=binnenland"); ?>  </center>  <br />  <br /> </td> <td width="30%">  <center>  <div class="title-rss"><a class="title-rss" href="#detail.php?category=news&section=buitenland">Buitenland</a></div><br />  <?php include("http://" . $_SERVER['SERVER_NAME']."/rss/smallbox.php?url=http://www.standaard.be/Rss.aspx&url2=section&url3=Nieuws&url4=subsection&url5=buitenland"); ?>  </center>  <br />  <br /> </td></tr><tr> <td width="30%">  <center>  <div class="title-rss"><a class="title-rss" href="#detail.php?category=news&section=sport">Sport</a></div><br />  <?php include("http://" . $_SERVER['SERVER_NAME']."/rss/smallbox.php?url=http://www.standaard.be/Rss.aspx&url2=section&url3=Nieuws&url4=subsection&url5=sport"); ?>  </center>  <br />  <br /> </td> <td width="30%">  <center>  <div class="title-rss"><a class="title-rss" href="#detail.php?category=news&section=cultuur">Cultuur</a></div><br />  <?php include("http://" . $_SERVER['SERVER_NAME']."/rss/smallbox.php?url=http://www.standaard.be/Rss.aspx&url2=section&url3=Nieuws&url4=subsection&url5=cultuur"); ?>  </center>  <br />  <br /> </td></tr></table></center></div></body></html>

pdedecker · June 14, 2006

I don't get it. By the way, let's make this clear: the <div>'s 'home' and 'news' represent two different 'pages'. They are loaded into one page, but only one at a time is shown.Edit: also, the code that you supplied generates lots of errors. Actually, it's always the same error that keeps showing up: 'this.element has no properties' (row: 505)

justsomeguy · June 14, 2006

This doesn't have anything to do with your issue, but just something to think about for the future.You should stay away from naming your classes after their style, like 'whitetxt-Arial'. If down the road you decide to do a redesign and change all the styles, you might end up with a class called whitetxt-Arial that is black Verdana or something. Use less-specific names, call the styles what they represent instead of the properties they are. Like ContentText, or MenuText, or NewsText or something, that way at least the names still make sense if you change everything later.

pdedecker · June 14, 2006

Thank you for the advice, but I'm still trying to solve the problem. Do you know how I can solve it?

justsomeguy · June 14, 2006

Try setting width and height both to 100% on the <html> and <body> tags, in addition to your div. I haven't been very successful working with heights in CSS, browsers don't seem to want to do those things very easily.

pdedecker · June 15, 2006

You mean, like this?

<html width="100%" height="100%">(...)<body onLoad="hideAllTabs();" width="100%" height="100%">

That doesn't work.

justsomeguy · June 15, 2006

Do it with CSS<html style="width: 100%; height: 100%;"><body onLoad="hideAllTabs();" style="width: 100%; height: 100%;">

pdedecker · June 15, 2006

It's working now! Thanks!Edit: not yet. :-(Scriptaculous doesn't like this code, because it returns

Error: element has no propertiesSource http://beta/js/scriptaculous/effects.jsRow 591

pdedecker · June 18, 2006

Does someone know what's wrong with this?

justsomeguy · June 18, 2006

I don't know what scriptaculous is or what it is trying to do, so I'm not sure what the problem is. I wouldn't think that changing the CSS on the body tag would have any effect on a script, unless the script is trying to modify attributes of the body tag that aren't there.

pdedecker · June 19, 2006

Scriptaculous is a JavaScript library (a bunch of JS files) that enables you to do awesome Ajax-powered effects with DIVs and stuff. You can check that out at http://script.aculo.us/ and you can find some demonstrations at http://wiki.script.aculo.us/scriptaculous/show/Demos.

pdedecker · June 21, 2006

Does anybody have experience with Scriptaculous here so that you can help me with this problem? =)

Stretching a <div> to the right-bottom corner

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in