Web Wiz - Green Windows Web Hosting

  New Posts New Posts RSS Feed - Nested Div Tags
  FAQ FAQ  Forum Search   Events   Register Register  Login Login

Nested Div Tags

 Post Reply Post Reply
Author
VBScript View Drop Down
Senior Member
Senior Member
Avatar

Joined: 14 July 2004
Location: United Kingdom
Status: Offline
Points: 219
Post Options Post Options   Thanks (0) Thanks(0)   Quote VBScript Quote  Post ReplyReply Direct Link To This Post Topic: Nested Div Tags
    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?


Edited by VBScript - 16 June 2007 at 5:56pm
Back to Top
MortiOli View Drop Down
Senior Member
Senior Member
Avatar

Joined: 26 May 2002
Location: United Kingdom
Status: Offline
Points: 514
Post Options Post Options   Thanks (0) Thanks(0)   Quote MortiOli Quote  Post ReplyReply Direct Link To This Post 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;
Back to Top
KCWebMonkey View Drop Down
Senior Member
Senior Member
Avatar
Go Chiefs!

Joined: 21 June 2002
Status: Offline
Points: 1319
Post Options Post Options   Thanks (0) Thanks(0)   Quote KCWebMonkey Quote  Post ReplyReply Direct Link To This Post Posted: 18 June 2007 at 4:38am
also will need to add position:absolute; if you're positioning it with CSS
Back to Top
Sumea View Drop Down
Newbie
Newbie


Joined: 18 September 2006
Status: Offline
Points: 30
Post Options Post Options   Thanks (0) Thanks(0)   Quote Sumea Quote  Post ReplyReply Direct Link To This Post 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.
Back to Top
KCWebMonkey View Drop Down
Senior Member
Senior Member
Avatar
Go Chiefs!

Joined: 21 June 2002
Status: Offline
Points: 1319
Post Options Post Options   Thanks (0) Thanks(0)   Quote KCWebMonkey Quote  Post ReplyReply Direct Link To This Post Posted: 16 July 2007 at 3:18am

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

Back to Top
 Post Reply Post Reply

Forum Jump Forum Permissions View Drop Down

Forum Software by Web Wiz Forums® version 12.08
Copyright ©2001-2026 Web Wiz Ltd.


Become a Fan on Facebook Follow us on X Connect with us on LinkedIn Web Wiz Blogs
About Web Wiz | Contact Web Wiz | Terms & Conditions | Cookies | Privacy Notice

Web Wiz is the trading name of Web Wiz Ltd. Company registration No. 05977755. Registered in England and Wales.
Registered office: Web Wiz Ltd, Unit 18, The Glenmore Centre, Fancy Road, Poole, Dorset, BH12 4FB, UK.

Prices exclude VAT at 20% unless otherwise stated. VAT No. GB988999105 - $, € prices shown as a guideline only.

Copyright ©2001-2026 Web Wiz Ltd. All rights reserved.