PDA

View Full Version : nested divs and liquid design

marrow
02-22-2004, 09:31 AM
Despite looking at resources for over a week, I am just plain confused as how to get two of my divs:

#content (the black box where the text goes)
#divbg (the purple dotted background behind #content)

...to nest like a table within a table. I want "divbg" to stretch to accomodate the "content" div. Basically, I want the purple dotted div to act as a border for the content div, expanding its length so that the content div doesn't overlap the bottom of "divbg."

This is the original layout, positioned with px instead of % (I decided later to use % so my layout would look pretty much the same in most resolutions):
the layout positioned with px (http://sodskirt.net/links/)

I had to manually set the height of "divbg" so that it would be long enough to border the bottom of the "content" div.

Here's what I've come up with so far and I'm having trouble making it look like
the original layout.

revised layout so far (http://sodskirt.net/divredesign.html)

Help? Or maybe a link to a good tutorial that deals pretty much specifically with my problem?
MariGirl2003
02-22-2004, 01:32 PM
I understand wat your sayin' .. hold on im goin' to see wat i can do..brb
MariGirl2003
02-22-2004, 01:51 PM
I got it!!!! Here's the code...
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="http://sodskirt.net/links/design.css" rel="stylesheet" type="text/css">
<script language="JavaScript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
// -->
</script>
</head>

<body bgcolor="#FFFFFF" text="#000000">

<div id="navi" style="position:absolute; left:10px; top:4px; width:289px; height:607px; z-index:1">
<div id="sidebar" style="position:absolute; left:-2px; top:-2px; width:303px; height:619px; z-index:2"></div>
<div id="divbg" style="position:absolute; left:3px; top:8px; width:303px; height:604px; z-index:2"></div>

</div>

<div id="content" style="position:absolute; left:21px; top:22px; width:281px; height:581px; z-index:1; background-image: url(http://sodskirt.net/links/links.gif); layer-background-image: url(http://sodskirt.net/links/links.gif); border: 1px none #000000">These
are my favorite sites. <br />
<h3>Daily Visits</h3>
<a href="http://x-entertainment.com">X-Entertainment</a>
<br />
<a href="http://televisionwithoutpity.com">Television Without Pity</a>
<h3>Fun</h3>
<a href="http://www.albinoblacksheep.com/video/aicha.php">"Aicha" Music Video by GellieMan</a>
<br />
<a href="http://ebaumsworld.com/juddnelson.html">Judd Nelson Soundboard</a>
<h3>Music</h3>
<a href="http://www.psycho-jello.com/beatles/">The Beatles Domain</a>
<br />
<a href="http://www.belleandsebastian.com">Belle and Sebastian</a>
<br />
<a href="http://home.att.net/~bubblegumusic/">The Classic Bubblegum Homepage</a>
<br />
<a href="http://www.artandleisure.com/art/momus/intro.html">Folktronic Interactive Kiosk</a>
<br />
<a href="http://home.att.net/~liveletdie/">Idle Hands: Not Your Ordinary Beatles Site</a>
<br />
<a href="http://imomus.com">Momus</a>
<br />
<a href="http://recordnerd.com">Record Nerd</a>
<br />
<a href="http://www.rutles.org">The Rutles</a>
<br />
<a href="http://stephinsongs.wiw.org">Stephinsongs</a>
<h3>Spooky</h3>
<a href="http://casebook.org">Casebook (Jack the Ripper)</a>
<br />
<a href="http://crimelibrary.com">Crime Library</a>
<br />
<a href="http://paranormal.about.com/library/weekly/aa101402a.htm">Famous Ghost Photos</a>
<br />
<a href="http://snopes.com">Snopes: Urban Legends Reference Pages</a> </div>

</body>
</html>

Sry.. you may have to change somethings around becuz I was rushin'! SRY!
MariGirl2003
02-22-2004, 01:55 PM
Sry.. you may have to change somethings around becuz I was rushin'! SRY!