PDA

Click to See Complete Forum and Search --> : absolute leftnav bigger than text (footer problem)

lol-i
03-13-2006, 09:23 AM
i have a problem here which is the leftnav being bigger than my page body.
since its a absolute div and the body is a relative div, its cutted in the end of the page, coming over the footer.

here is the sample:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
#container {
position: relative;
width: 779px;
margin-left: auto;
margin-right: auto;
background:#fff;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
}
#leftnav {
position: absolute;
left: 20px;
top: 20px;
width: 100px;
background:#e8e8e8;
}
#mainbody {
position: relative;
margin-left: 150px;
}
#footer {
position: relative;
background:#c1c1c1;
}
</style>
</head>
<div id="container">
<div id="leftnav">
<ul>
<li>Topic 1</li>
<li>Topic 2</li>
<li>Topic 3</li>
<li>Topic 4</li>
</ul>
<ul>
<li>Topic 5</li>
<li>Topic 6</li>
<li>Topic 7</li>
<li>Topic 8</li>
</ul>
<ul>
<li>Topic 9</li>
<li>Topic 10</li>
<li>Topic 11</li>
<li>Topic 12</li>
</ul>
<ul>
<li>Topic 13</li>
<li>Topic 14</li>
<li>Topic 15</li>
<li>Topic 16</li>
</ul>
<ul>
<li>Topic 17</li>
<li>Topic 18</li>
<li>Topic 19</li>
<li>Topic 20</li>
</ul>
<ul>
<li>Topic 1</li>
<li>Topic 1</li>
<li>Topic 1</li>
<li>Topic 1</li>
</ul>
<ul>
<li>Topic 1</li>
<li>Topic 1</li>
<li>Topic 1</li>
<li>Topic 1</li>
</ul>
<ul>
<li>Topic 1</li>
<li>Topic 1</li>
<li>Topic 1</li>
<li>Topic 1</li>
</ul>
<ul>
<li>Topic 1</li>
<li>Topic 1</li>
<li>Topic 1</li>
<li>Topic 1</li>
</ul></div>
<div id="mainbody">
<p>sample</p>
<p>sample</p>
<p>sample</p>
<p>sample</p>
<p>sample</p>
<p>sample</p>
<p>sample</p>
<p>sample</p>
<p>sample</p>
</div>
<div id="footer">End of the Page</div>
</div><body>
</body>
</html>


what can i do to sort it out? make the footer stay always lower than a absolute
KDLA
03-13-2006, 11:00 AM
Your navigation needs to float: left.

#leftnav {
float: left;
position: absolute;
left: 20px;
top: 20px;
width: 100px;
background:#e8e8e8;

KDLA
Norsk
03-13-2006, 11:34 AM
lol-i,

Because you want the overall DIV to be centered I would remove the absolute and relative positioning and assign a float: left to the left column and a float: right to the right column and then add a clear: both to the footer. This should solve your "floating" footer. You may beed to tweek the left and right column widths so they work across CSS compliant browsers (Firefox) and IE but this is easily overcome and this will work across all browsers. You can't use the width: 100% with this option. See my site: www.comsix.com.

Timy
lol-i
03-14-2006, 09:26 AM
Norsk, thanks for the tip, but again i have a problem.

In my case, i have a body bg, a leftnav bg and a text box bg. If i set a container bg matching the text box i might have a problem with it in some pages where the leftnav is smaller than the content. well, its quite messy to explain, im posting the problem.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
#container {
position: relative;
width: 774px;
margin-left: auto;
margin-right: auto;
background:#666;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
}
#leftnav {
float: left;
left: 20px;
top: 20px;
width: 100px;
background:#e8e8e8;
}
#mainbody {
float: right;
width: 674px;
background:#666;
}
#mainbody p { padding-left: 40px;}
#footer {
background:#c1c1c1;
clear:both;
}
</style>
</head>
<div id="container">
<div id="leftnav">
<ul>
<li>Topic 1</li>
<li>Topic 2</li>
<li>Topic 3</li>
<li>Topic 4</li>
</ul>
<ul>
<li>Topic 5</li>
<li>Topic 6</li>
<li>Topic 7</li>
<li>Topic 8</li>
</ul>
<ul>
<li>Topic 9</li>
<li>Topic 10</li>
<li>Topic 11</li>
<li>Topic 12</li>
</ul>
</div>
<div id="mainbody">
<p>sample</p>
<p>sample</p>
<p>sample</p>
<p>sample</p>
<p>sample</p>
<p>sample</p>
<p>sample</p>
<p>sample</p>
<p>sample</p>
</div>
<div id="footer">End of the Page</div>
</div><body>
</body>
</html>



what i need is both (text box and left nav) to reach the end of the page following its bgs.
Norsk
03-14-2006, 01:02 PM
Ah, I totally understand - i think;)

So, as the page gets longer you want the left nav to get longer as well? Ok, this is a limitation with CSS as the height tag has been depreciated - or does not work.

In your example you are talking about the silver area under the Topic 12? You want this to "stretch" to the footer?

So, there's some tricks you can do to get around this and what I would create a BG image has two columns. One would be the color of the left column and the other would be the color of the right column. Then tile these vertically using the BODY tag. See www.comsix.com and you can see the BG is tiles to give a more robust look and feel with drop shadows etc. The reality is that this is just a 800x1 graphic that is tiled vertically. The header and footer are actually on top of the tiles graphic.

Tim