Classic ASP Discussion - Nested Div Tags

Print Page | Close Window

Nested Div Tags

Printed From: Web Wiz Forums
Category: General Discussion
Forum Name: Classic ASP Discussion
Forum Description: Discussion on Active Server Pages (Classic ASP).
URL: https://forums.webwiz.net/forum_posts.asp?TID=23543
Printed Date: 29 March 2026 at 4:25am
Software Version: Web Wiz Forums 12.08 - https://www.webwizforums.com

Topic: Nested Div Tags

Posted By: VBScript
Subject: Nested Div Tags
Date Posted: 16 June 2007 at 5:55pm

I'm trying to design a website that is tableless using DIV tags. I have a slight problem with a nested div tag.

Here is the code I am using

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
 <style>
 body{
  background-color: #F0F0F0;
  padding:0px;
  margin:0px;
 }
 </style>
</head>
<body>
<div style=" width:976px; height:100%; margin-left:auto; margin-right:auto; background-color:#FFFFFF;">
 <div style="width: 960px; height:100%; background-color:#FFFFFF; background-image:url(images/b_l.gif); background-repeat:repeat-y; float: left; padding-left:10px;">
   a<br />
   b<br />
   c<br />
  </div>
 <div style="width: 6px; line-height:inherit; height: inherit; background-repeat:repeat-y; float:right; background-image:url(images/b_r.gif);">&nbsp;</div>
</div>
</body>
</html>

The last div tag:

<div style="width: 6px; height: 100%; background-repeat:repeat-y; float:right; background-image:url(images/b_r.gif);">&nbsp;

Has a background image, however it does not reach the height of the div tag that it is inside of.

Does anyone know how I can make this nested div tag stretch to the same height as the one it is nested in?

-------------
http://www.james-r.co.uk" rel="no follow - James
http://www.gotrillian.com/?4498-20" rel="no follow - Trillian - M

Replies:

Posted By: MortiOli
Date Posted: 16 June 2007 at 6:42pm

It looks like it's being caused by the <br /> in the containing div.

Could you overcome it by postioning the�nested�div�using�CSS.

Ie, top: -5px; left: 0px;

Posted By: KCWebMonkey
Date Posted: 18 June 2007 at 4:38am

also will need to add position:absolute; if you're positioning it with CSS

Posted By: Sumea
Date Posted: 16 July 2007 at 1:43am

I think it's the "height:100%" in the div tag. Making adjustable height in css has *always* been iffy and it's one of the sorepoints they're planning to fix in css 3 (or the next iteration of css). Of course, it'll be a long time before it's standard.

Posted By: KCWebMonkey
Date Posted: 16 July 2007 at 3:18am

Might be...using percentages for div heights doesn't work correctly with certain Doctypes.