Nested Divs don't keep the right width

kpm547 · #1 (**permalink**) May 17th, 2005, 14:40

I'm trying to make a page that is 80% total width and is centred. I've used a div as a container and then I have my header and content and footer divs inside. This is the code that I thought would work, but it doesn't.

Code: Select all

CSS Stylesheet
#container {
     position:absolute;
     left:10%;
     top:0;
     width:80%
}

#header {
     position:absolute;
     left:0;
     top:0;
     Height:10%;
     width:100%;
}

#main {
     position:absolute;
     left:0;
     top:10%;
     width:100%;
}

#footer {
     position:absolute;
     left:0;
     bottom:0;
     Height:10%;
     width:100%;
}


HTML
<div id="container">

<div id="header">header text here...</div>
<div id="main">main content here...</div>
<div id="footer">footer text here...</div>

</div>

This code doesn't bind the width of the divs inside the container to the container width. They overlap to the right edge of the screen. The left edge is fine. They start at 10% from the edge of screen, which is what I want.

What am I doing wrong?

benbacardi · #2 (**permalink**) May 17th, 2005, 16:05

change the position attribute of the header, main and footer divs to relative rather than absolute...

kpm547 · #3 (**permalink**) May 18th, 2005, 18:57

I tried that but it don't seem to work. I have solved some of the problems, but I still have one. It displays correctly in FF, but not in IE. What do I need to do to extend the titlebar over to the right of the main div?

Here's my css:

Code: Select all

html, body {
	height:100%;
	color:#19428F;
	font-family : Tahoma;
}

#main {
	position:absolute;
	left:10%;
	top:0px;
	width:80%;
	height:100%;
	background-color: #F5F7DC;

}



#Logo {
	position:absolute;
	left:0px;
	top:3px;
	width:201px;

}



#Titlebar {
	position:absolute;
	left:201px;
	top:24px;
    right:0;
	height:64px;
	background-image: url(images/Barspace.gif);
	background-repeat: repeat-x;
}





#MenuBar {
	position:absolute;
	left:201px;
	top:88px;
	right:10%;
	height:27px;
	background-image : url(images/MenuBar.gif);
	background-position : left;
	background-repeat : no-repeat;
}



#footer {
	position:absolute;
	bottom:0;
	
	left:0;
	height:5%;
	width:100%;
	right:0;
	max-height:5%;
	font-size:75%;
	text-align : center;
	color : #FBF38D;
	padding : 10px 0 0 0;
	background-color : #19428F;
}

#content {
	position:absolute;
	top:115px;
	left:204px;
	right:0;
	padding: 10px 10px 10px 10px;
	
}
#leftbar {
	position:absolute;
	top:115px;
	left:0;
	width:204px;

}

And here's the HTML:

Code: Select all

<html>
<head>
<title>Lethbridge Area Search and Rescue Association</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css"
href="lasarastyle.css" />






<script type="text/javascript"
        src="udm-resources/udm-custom.js"></script>
<script type="text/javascript"
        src="udm-resources/udm-control.js"></script>

<script type="text/javascript"
        src="udm-resources/udm-style.js"></script>


</head>
<body style="background-color:#F5F7DC; margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px;">

<div id="main">

<div id="Logo">
        [img]images/Logo.gif[/img]
</div>

<div id="Titlebar">
        [img]images/Titlebar.jpg[/img]
</div>

<div id="MenuBar">

<ul id="udm" class="udm">
[*]About
        [*]Recruitment

        [*]Training
                <ul>[*]Courses
                  [*]Training Info
                  
[*]Meetings
                  [*]GPS
                  [/list]
        [*]Operations

                <ul>[*]Call Out
                  [*]Equipment List
                  [/list]        [*]Fundraising

                <ul>[*]Fundraising Info
                  [*]Supporters
                  [/list]        [*]Resources

                <ul>[*]Photo Gallery
                  [*]Links
                  [/list]        [/list]
<script type="text/javascript"
        src="udm-resources/udm-dom.js"></script>

</div>


<div id="leftbar">
</div>
<div id="content">
This is the content areaThis is the content areaThis is the content areaThis is the content areaThis is the content areaThis is the content areaThis is the content areaThis is the content areaThis is the content areaThis is the content areaThis is the content areaThis is the content areaThis is the content area

</div>
<div id="footer">
Lethbridge Area Search and Rescue Association

Copyright 2005

</div>

</div>

</body>
</html>

The page can be viewed here in action www.lasara.org/lasaratest/

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Please help - position problem with nested divs	DavidinLondon	Web Page Design	1	May 21st, 2006 15:10
Nested tables and Layers	Andy_H	Web Page Design	2	May 29th, 2005 18:19
XHTML Nested List	rbrown1972	Web Page Design	5	Feb 7th, 2005 20:49
Nested divs IE 5.2 Mac CSS2 bugs	wheatus	Web Page Design	6	Mar 31st, 2004 17:03

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
Nested Divs don't keep the right width